1

私はjavascript/jQueryにかなり慣れていません。要素がクリックされたときにさまざまな要素を表示/非表示にする並べ替えのメニューを作成しようとしています。div A をクリックすると、div A が非表示になり、その場所に div B が表示され、順序付けられていないリストが表示されます。div B をクリックすると、div B が非表示になり、div A が表示され、ul が非表示になります。

90% ほど進んでいますが、少し助けが必要です。最も近い div と ul のみに影響を与えようとしていますが、すべてが影響を受けているようです。私が読んだ情報から、それは私が使用するべきであり、私がそうであるように見えます.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

更新された fiddleを見てください。

「非表示」ヘッダーに過剰なマークアップがありました。既存のヘッダーのクラス名を変更するだけなので、これは不必要でした。

新しいマークアップは次のようになります。

<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

これがあなたが探しているものかどうかはわかりませんが、私にとっては最も理にかなっています。

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セレクターを使用しました。 closestsiblings

セレクターは要素を見回さず、セレクターclosestと同様に上向きに見えるため(ドキュメントparentに記載されているように)、それが進むべき道だとは思いません。

于 2013-03-13T17:06:48.417 に答える
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/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 は 2 つではなく 1 つだけ必要で、要素のクラスを切り替えるだけです。

兄弟を使用しているため、一致するすべての兄弟に影響します..本当に必要なのは.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();  
    }          
});

$(this) は同じ要素を参照しているため、 .closest() を使用する必要もありません

クラスを切り替えるだけなので、次の要素はありません

<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 に答える