1

我对 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();
        });
});
4

5 回答 5

3

看看更新的小提琴。

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

新标记如下所示：

<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');
        }   
    });
});
于 2013-03-13T17:07:17.573 回答
1

我想这应该这样做：

$(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();
        });
});
于 2013-03-13T16:50:45.980 回答
1

我不确定这是否是您正在寻找的，但这对我来说最有意义。

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选择器而不是closestand siblings。

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

于 2013-03-13T17:06:48.417 回答
1

看到这个：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();
    });
});
于 2013-03-13T17:07:01.037 回答
1

你真的只需要一个 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 语句

小提琴

于 2013-03-13T17:07:03.560 回答