Question

我正在尝试获取一个隐藏的嵌套ul，以便在单击其父li中的div时显示，并且我正熟悉它。原样，嵌套的ul的初始隐藏工作，div背景图像切换正常，但没有其他工作。有什么建议？

以下当前代码：

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');
    });
});

非常感谢！

Answer 1

尝试

$(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');

    });
});

演示：Fiddle

Answer 2

尝试

$(document).ready(function(){
    $('.subField').hide();

    $('.browseFields').on("click" , ".buttonShow" , function() {
        $(this).removeClass('buttonShow').addClass("buttonHide");
        $(this).parent().find('.subField').show('slow');
    });
    $('.browseFields').on("click" , ".buttonHide" , function() {
        $(this).removeClass('buttonHide').addClass("buttonShow");
        $(this).parent().find('.subField').hide('slow');
    });
});

Answer 3

您也可以尝试合并点击处理程序

$(document).ready(function () {
    $('.subField').hide();
    //use event delegation since classes are changed dynamically
    $('#branches').on('click', '.buttonShow, .buttonHide', function () {
        $(this).hasClass('buttonShow') ? $(this).siblings('.subField').show('slow') : $(this).siblings('.subField').hide('slow');

        $(this).toggleClass('buttonHide buttonShow');

    });
});

Answer 4

我在这里创造了一个工作小提琴。请检查 http://jsfiddle.net/rwb75/9/

我在你的jQuery中做了一些改变。我也在你的HTML中做了一些改变。我已将<div class="buttonShow"><a href="#">1</a></div>锚标记放在div中。

 $(document).ready(function(){
        $('.subField').hide();
        $(document).on("click",".buttonShow",function(e) {
            $(this).addClass('buttonHide');
            $(this).removeClass('buttonShow');
           $(this).closest('li').find('.subField').eq(0).show('slow');        
        });
         $(document).on("click",".buttonHide",function(e) {
            debugger
             $(this).addClass('buttonShow');
             $(this).removeClass('buttonHide');
             $(this).closest('li').find('.subField').eq(0).hide('slow');
        });
    });

jQuery在父li中单击div时显示嵌套的ul

4 个答案: