Question

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

我有大约90％的方式，但我需要一些帮助。我试图只影响最近的div和uls，但似乎一切都受到了影响。从我读到的信息来看，我似乎应该使用.siblings和.closest，但显然我做错了。

JS小提琴链接：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。

“hide”标头的标记过多。这是不必要的，因为您只需更改现有标题上的类名称。

新标记如下所示：

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

Answer 2

我想这应该这样做：

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

jQuery(".essFeatureHeader.hidefeature").click(function() {
            $(this).next(".featureList").hide("slow");
            $(this).prev('.essFeatureHeader').show();
            $(this).hide();
        });
jQuery(".essFeatureHeader:not(.hidefeature)").click(function() {
            $(this).next('.essFeatureHeader').show();
            $(this).next('.essFeatureHeader').next(".featureList").show("slow");
            $(this).hide();
        });
});

Answer 3

我不确定这是不是你想要的，但这对我来说最有意义。

http://jsfiddle.net/39vYR/1/

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

    jQuery(".essFeatureHeader").click(function() {
        $(this).hide().next('.hidefeature').show();
        $(this).nextAll('ul.featureList:first').show("slow"); 
    });

    jQuery(".hidefeature").click(function() {
        $(this).hide().prev('.essFeatureHeader').show();
        $(this).nextAll('ul.featureList:first').hide("slow");
    });
});

我使用next，nextAll和prev选择器代替closest和siblings。

closest选择器不环顾元素，它向上看，类似于parent选择器（如documentation中所述），所以我不认为它是要走的路。

Answer 4

请参阅：http://jsfiddle.net/w5VXr/10/

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

    jQuery(".essFeatureHeader").click(function () {
       $(this).nextAll('.featureList:first').show("slow");    
       $(this).nextAll('.essFeatureHeader:first').show();
       $(this).hide();

    });
    jQuery(".hidefeature").click(function () {
       $(this).prev('.essFeatureHeader').show();
       $(this).nextAll('.featureList:first').hide("slow");
       $(this).hide();
    });
});

Answer 5

你真的只需要一个div而不是两个 - 只需在元素上切换类

你正在使用兄弟姐妹 - 所以它会影响所有匹配的兄弟姐妹..你真正想要的是.next（）

jQuery("div.essFeatureHeader").click(function () {
    var $el = $(this);
    $el.find('i').toggleClass('icon-plus icon-minus');
    if($el.is('.hidefeature')){
        $el.next('.featureList').toggle();   
    }else{            
        $el.next().next('.featureList').toggle();  
    }          
});

你也不需要使用.closest（），因为$（this）引用了相同的元素

您没有以下元素，因为您可以切换类

<div class="essFeatureHeader hidefeature" style="display: none;"><i class="icon-minus" style="margin-right: 5px"></i>Outbound/Outcall Services</div>

如果删除了这些div，则上面的代码中不再需要else语句

FIDDLE

显示/隐藏最近的元素

5 个答案: