jquery - 仅显示/隐藏最近的元素

Question

我对 javascript/jQuery 很陌生，我正在尝试构建一个菜单，在单击元素时显示/隐藏不同的元素。单击 div A 时，它会隐藏 div A，在其位置显示 div B，并显示无序列表。单击 div B 时，它会隐藏 div B，显示 div A，并隐藏 ul。

我已经完成了大约 90%，但我需要一点帮助。我试图只影响最近的 div 和 uls，但似乎所有内容都受到影响。从我读到的信息来看，我似乎应该使用 .siblings 和 .closest，但显然我做错了一些事情。

JS fiddle 链接:http://jsfiddle.net/w5VXr/6/

HTML:

<div class="essFeatureHeader">Appointment Scheduling</div>
<div class="essFeatureHeader hidefeature">Appointment Scheduling</div>
     <ul class="featureList">
         <li class="alternate">Unlimited Online Scheduling</li>
     </ul>

jQuery:

$(document).ready(function($) {
    jQuery(".featureList").hide();
    jQuery(".hidefeature").hide();

    jQuery(".essFeatureHeader").click(function() {
            $(this).closest('.essFeatureHeader').siblings(".featureList").show("slow");
                            $(this).closest('.essFeatureHeader').hide();
                            $(this).closest('.essFeatureHeader').siblings('.hidefeature').show(); 
        });
    jQuery(".hidefeature").click(function() {
                            $(this).closest('.hidefeature').siblings('.essFeatureHeader').show();
                            $(this).closest('.hidefeature').siblings('.featureList').hide();
                            $(this).closest('.hidefeature').siblings('.hidefeature').show();
        });
});

Answer 1

看看the updated fiddle .

“隐藏” header 的标记过多。这是不必要的，因为您只需更改现有 header 上的类名称即可。

新标记如下所示:

<div class="essFeatureHeader">
    <i class="icon-plus" style="margin-right: 5px"></i>
    Outbound/Outcall Services
</div>
<ul class="featureList">
    <li class="alternate">Collect Client Addresses</li>
    <li>Map Integration</li>
    <li class="alternate">Travel Time</li>
</ul>

对于每个项目

JavaScript 代码更改如下:

$(function($) {
    $("ul.featureList").hide();
    $("div.essFeatureHeader").click(function() {
        var $this = $(this),
            header = $this.find('i'),
            target = $this.next(".featureList"),
            showing = target.is(':visible');

        if(showing){ // hide
            target.hide('slow');
            header.removeClass('icon-minus').addClass('icon-plus');
        }
        else {
            target.show('slow');
            header.removeClass('icon-plus').addClass('icon-minus');
        }   
    });
});