jQuery display nested ul on click of div in parent

问题:

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?

Current code below:

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>

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

Thanks so much!

回答1:

Try

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

    });
});

Demo: Fiddle

回答2:

Try

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

回答3:

You can also try merging the click handlers

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

    });
});

回答4:

I have created a working fiddle at here. Please check http://jsfiddle.net/rwb75/9/

I have made some changes in your jQuery. Also i have made some changes in your html. I have put <div class="buttonShow"><a href="#">1</a></div> anchor tag in 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');
        });
    });