Question

在我的html页面中，列出了所有类别。每个类别都有一些子类别。我希望在单击列表项时，切换其子类别，即如果它们可见，则应隐藏它们，反之亦然。同时，只有一个列表项应该能够显示其子类别。我试过了 this answer，但它并没有帮助。我不介意使用JS，JQuery等或完全改变语法。我到现在为止的工作是

<ul>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 1</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>

    <li class ="outer-list-element">
        <a href="#" class="outer-list">category 3</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>

CSS

li {
    margin-bottom: 8px;
   }
 .inner-list {
    margin-top: 10px;
    display: none;
 }

脚本

$('.outer-list-element').click(function () {
    $(this).children().toggle();
})



$(".outer-list").click(function() {
$(this).siblings('.inner-list').toggle();
return false;
});

随意更新这个小提琴 https://jsfiddle.net/7vmtd2px/1/

Answer 1

试试这个......

$(document).on('click', ".outer-list", function() {
        $('.inner-list').hide(); //first hide all the element having class inner-list
        //$(this).siblings('.inner-list').toggle();
        $(this).next('ul').toggle(); // here is the trick
        return false;
});

和HERE is the FIDDLE

感谢Mohit

Answer 2

您可以使用showInnerList属性创建一个类（在本例中为display:block）。因此，在单击元素时，您可以将此类添加到要显示的DOM中。

我也在使用addClass＆amp; removeClass而不是切换。原因是点击任何DOM，我打算找到具有showInnerClass的元素并从中移除相同的类＆amp;然后将同一个类添加到兄弟

HTML

<ul class="myList">
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 1</a>
    <ul class="inner-list" id="inner-list">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#">sub category 2</a></li>
    </ul>
  </li>
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 2</a>
    <ul class="inner-list" id="inner-list_1">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#"> sub category 2</a></li>
    </ul>
  </li>
  <li class="outer-list-element">
    <a href="#" class="outer-list">category 3</a>
    <ul class="inner-list" id="inner-list_2">
      <li><a href="#">sub category 1</a></li>
      <li><a href="#">sub category 2</a></li>
    </ul>
  </li>
</ul>

JS

$('.outer-list-element a').click(function() {
  $('.myList').find('ul.showInnerList').removeClass('showInnerList');
  $(this).next('ul.inner-list').addClass('showInnerList');
})

另请注意，您对id使用相同的ul class="inner-list"。 id需要是唯一的

JSFIDDLE

Answer 3

请尝试以下代码。

$('.outer-list').click(function () {
   //Hide other ul
   $('ul .inner-list').not($(this).parent('li').find('ul')).hide();
   //Toggle clicked ul
   $(this).parent('li').find('ul').toggle();
});

li {
  margin-bottom: 8px;
}
.inner-list {
  margin-top: 10px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li class="outer-list-element">
            <a href="#" class="outer-list">category 1</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#">sub category 2</a></li>
            </ul>
        </li>
        <li class="outer-list-element">
            <a href="#" class="outer-list">category 2</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#"> sub category 2</a></li>
            </ul>
        </li>
        <li class ="outer-list-element">
            <a href="#" class="outer-list">category 3</a>
            <ul class="inner-list">
                <li><a href="#">sub category 1</a></li>
                <li><a href="#">sub category 2</a></li>
            </ul>
        </li>
</ul>

Answer 4

这与Sarath的答案相同，但是如果点击两次，还会自动折叠当前列表的附加功能。

<ul>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 1</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>
    <li class="outer-list-element">
        <a href="#" class="outer-list">category 2</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#"> sub category 2</a></li>
        </ul>
    </li>
    <li class ="outer-list-element">
        <a href="#" class="outer-list">category 3</a>
        <ul class="inner-list" id="inner-list">
            <li><a href="#">sub category 1</a></li>
            <li><a href="#">sub category 2</a></li>
        </ul>
    </li>
</ul>

CSS：

li {
    margin-bottom: 8px;
}
.inner-list {
    margin-top: 10px;
    display: none;
}

jQuery：

$(document).on('click', ".outer-list", function() 
{
    $(this).parents().siblings().children(".inner-list").hide();
    $(this).siblings('.inner-list').toggle();
});

Here's the jsFiddle以防您希望在行动中看到它。

如何按类选择被点击元素的子元素

4 个答案: