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手风琴

回答

相关问题