Jquery UI手風琴

我已經設法讓我的Wordpress網站的首頁上使用Jquery UI手風琴。Jquery UI手風琴

問題是，當我點擊標題時，不是打開和關閉div，而是在點擊文本的任意部分時發生效果，例如在段落中間單擊。

我想這樣做，如果我點擊標題（h2或h3等），它會打開標題下的部分。現在，它似乎工作，當我點擊在段落的中間，或者有時它工作，當我點擊一個標題，但它不起作用，當我下次點擊標題...我完全困惑。

我一直認爲它自動處理標題（類似於我在另一個網站上的手風琴插件）。我無法在網上找到任何信息，爲我解決這個問題。

這裏是我的手風琴腳本：

$(function() { 
$("#accordion").accordion({ 
}); 
    });

下面的PHP代碼顯示了我想要的手風琴作用於股利。你看，我從Wordpress的另一個頁面將內容拉到我的首頁。請注意那裏的「手風琴」div ...

  <section id="faq"> 
      <div class="indent"> 
        <?php 
     $query = new WP_Query('pagename=faq'); 
     // The Loop 
     if ($query->have_posts()) { 
      while ($query->have_posts()) { 
       $query->the_post(); 
       echo '<div class="entry-content">'; 
       echo '<div id="accordion">'; //This the div that should be affected... 
       the_content(); 
       echo '</div>'; 
       echo '</div>'; 
      } 
     } 

     /* Restore original Post Data */ 
     wp_reset_postdata(); 
     ?> 
      </div> 
     </section>

問題是否與事實有關，我從另一頁面拉內容？

順便說一句，我還有一些其他腳本與手風琴腳本運行在同一個JS文件中，但我評論了這些，並且問題依然存在。

這裏是整個JS文件的樣子，萬一你想看到的：

jQuery(document).ready(function($) { 

/* Stick navigation to the top of the page */ 
var stickyNavTop = $('.main-navigation').offset().top; 

$(window).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 

    if (scrollTop > stickyNavTop) { 
     $('.main-navigation').addClass('sticky-header'); 
     $('.site-header').addClass('shifted'); 
    } else { 
     $('.main-navigation').removeClass('sticky-header'); 
     $('.site-header').removeClass('shifted'); 
    } 

}); 

     /* Scroll to specific section on front page */ 
$(function() { 
$('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
      $('html,body').animate({ 
       scrollTop: (target.offset().top - 50) 
      }, 1000); 
      return false; 
     } 
    } 
}); 
}); 


    /* Accordion effect */ 
    $(function() { 
$("#accordion").accordion({ 
}); 
    }); 


}); /* Ends the jquery declaration */

所有幫助表示讚賞。謝謝！

來源

2016-03-01 big picture

您應該嘗試使用[MCVE]（http://stackoverflow.com/help/mcve）並刪除PHP部分，因爲您的問題是使用HTML/javascript。如果你能把這個PHP輸出壓縮成HTML，人們可以重現你的問題，你會得到更好的答案。 – mkaatman

您的代碼正在打印幾個#accordion div，當它應該只是一個包裝所有的手風琴項目。它應該是這樣的：

if ($query->have_posts()) { 
    echo '<div id="accordion">'; 
    while ($query->have_posts()) { 
     $query->the_post(); 
     echo '<h3>'.get_the_title().'</h3>'; 
     echo '<div class="entry-content">'; 
     the_content(); 
     echo '</div>'; 
    } 
    echo '</div>'; 
}

這樣，你將有類似於docs所提出的代碼：一個#accordion包裹的物品時，<h3>作爲標題和<div>的內容。

來源

2016-03-01 02:07:32

這不起作用。我甚至嘗試將html標記直接放入php頁面。手風琴效應發生了，但它是隨機的。我點擊一個段落，標題消失。我點擊一個標題，一些工作，一些沒有。這些標題是不是可以用jquery ui手風琴來點擊？標記應該如何顯示？ –

是的，它應該以這種方式工作。用wordpress迴應的HTML編輯你的問題，也許它有助於找出問題。 –

我解決了這個問題，將頁面的整個主體包裝在「accordion」div中（只留下頁眉和頁腳），然後讓腳本在H6標題上工作。

謝謝！

來源

2016-03-01 22:29:37

Jquery UI手風琴

回答

相關問題