jQuery在父级li中单击div时显示嵌套ul [英] jQuery display nested ul on click of div in parent li

问题描述

我正在尝试获取一个隐藏的嵌套ul，以在其父li中的div被单击时显示，并且有一段时间.照原样，嵌套ul的作品的初始隐藏和div背景图像切换得很好，但是没有其他动作.有什么建议?

I am trying to get a hidden nested ul to display when a div in its parent li is clicked, and am having a heck of a time with it. As is, the initial hiding of the nested ul's works, and the div background image toggles just fine, but nothing else is working. Any suggestions?

下面的当前代码:

HTML:

<div class="browseFields">
    <ul id="branches">
    <li><div class="buttonShow"></div><a href="#">1</a>
        <ul class="subField">
            <li><a href="#">a</a></li>
            <li><a href="#">b</a></li>
            <li><div class="buttonShow"></div> 
                <ul class="subField">
                    <li><a href="#">i</a></li>
                    <li><a href="#">ii</a></li>
                    <li><a href="#">iii</a></li>
                </ul>
                <a href="#">c</a>
            </li>
        </ul>
    </li>
    <li><a href="#">2</a></li>
    <li><div class="buttonShow"></div><a href="#">3</a>
        <ul class="subField">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
        </ul>
    </li>
    </ul>
</div>

介绍CSS:

.buttonShow {
  display: inline-block;
  background: url("../assets/images/plus.png") no-repeat scroll top left;
  width: 9px;
  height: 9px; }

.buttonHide {
  display: inline-block;
  background: url("../assets/images/minus.png") no-repeat scroll top left;
  width: 9px;
  height: 9px; }

jQuery:

$(document).ready(function(){
    $('.subField').hide();
    $('.buttonShow').click(function() {
        $(this).toggleClass('buttonHide');
        $(this).parent().next('.subField').show('slow');
    });
    $('.buttonHide').click(function() {
        $(this).parent().next('.subField').hide('slow');
    });
});

非常感谢！

推荐答案

尝试

$(document).ready(function () {
    $('.subField').hide();
    //use event delegation since classes are changed dynamically
    $('#branches').on('click', '.buttonShow', function () {
        //remove the show class and assign hidden
        $(this).toggleClass('buttonHide buttonShow');
        //the subfield is a child of the parent not the next sibling
        $(this).siblings('.subField').show('slow');
    });
    $('#branches').on('click', '.buttonHide', function () {
        $(this).toggleClass('buttonHide buttonShow');
        $(this).siblings('.subField').hide('slow');

    });
});

演示:小提琴

这篇关于jQuery在父级li中单击div时显示嵌套ul的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！