Question

我有以下HTML。

<div id="myid">
   <ul class="someclass">
      <li class="static">
         <a href="#"><span>Page1</span></a>
         <ul class="someclass">
            <li class="static"><a href="page1a.php"><span>Page1A</span></a></li>
            <li class="static"><a href="page1b.php"><span>Page1B</span></a></li>
         </ul>
      </li>
      <li class="static">
         <a href="#"><span>Page2</span></a>
         <ul class="someclass">
            <li class="static"><a href="page2a.php"><span>Page2A</span></a></li>
            <li class="static"><a href="page2b.php"><span>Page2B</span></a></li>
         </ul>
      </li>
   </ul>
</div>

使用以下代码我尝试根据用户点击的链接进行扩展和折叠。因此，如果用户点击“Page1”，那么它将展开（或者如果它已经展开则展开），并显示Page1A和Pag1B。同样点击Page2也会产生同样的效果。但是当我使用下面的代码时，它会扩展并折叠页面上的所有元素，而不是我点击的当前代码。

$('#myid > ul > li > a').click(function()
{
   if($(this).closest("li").children("ul").is(':visible') == false)
      $('#myid > ul > li > ul').slideDown('normal');
   else
      $('#myid > ul > li > ul').slideUp('normal');
});

Answer 1

你需要$（this）......

$(this).next('ul').slideDown('normal');

而不是

$('#myid > ul > li > ul').slideDown('normal');

Answer 2

ul是点击的锚元素的下一个兄弟，也可以使用slideToggle()代替if条件

$('#myid > ul > li > a').click(function () {
    var $ul = $(this).next('ul');
    $ul.stop(true, true).slideToggle('normal');
});

Answer 3

你需要使用jQuery中的$(this).next()，但你可以更多地简化它，并将其结构化。

<强> HTML

<div id="myid">
    <span>Question?</span>
    <div class="toggle">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore
        magna aliquam erat volutpat.
    </div>
</div>

<强> CSS

span {
    margin:0;
    padding:0;
    font-weight:700;
}
.toggle {
    display:none;
}

<强> JQUERY

$(document).ready(function() {
    $('#myid span').click(function() {
        $(this).next('.toggle').slideToggle(500);
    });
});

Answer 4

可能你可以试试这个：

$('#myid > ul > li').find('> a').on('click', function (e) {
  e.preventDefault();
  $(this).siblings('ul').stop().slideToggle('normal');
});

Demo Fiddle

Answer 5

写：

$('#myid > ul > li > a').click(function () {
    $(this).closest("li").children("ul").slideToggle("normal");
});

DEMO here.

Answer 6

您可以通过以下代码完成：

 $('#myid > ul > li > a').click(function()
{
  if($(this).closest("li").children("ul").is(':visible') == false)
    $(this).next('ul').slideDown('normal');
  else
    $(this).next('ul').slideUp('normal');
});

如何只滑下当前元素

6 个答案: