0

簡単に言えば、いくつかのjqueryタブで作業しており、このコードを使用しています。

css of the tabs:

/* ---------- INNER CONTENT (ACCORDION) STYLES ----*/
.accordian {    
    background-color:#fff;
    margin:20px auto;   
    color:red;
    overflow:hidden;

}

#boxOut{
    width:320px;
    height:410px;
    overflow:scroll;
    background-color:#fff;
    margin:154px auto auto 38px;

}






/*.accordian {
    width: 400px;
    margin: 50px auto;
}
*/
.accordian li {
    list-style-type: none;
    padding: 0 8px;
}

.dimension {
/*  height: 400px;
*/}


.odd, .even {
    font-weight: bold;
    height: 27px;
    padding-top: 3px;
    padding-left: 10px;
    border: 1px solid #d8d8d8;
    background: #ececec;
    color: #333;
    border-radius: 8px; 
-moz-border-radius: 8px; 
-webkit-border-radius: 8px;
margin-left:6px;
margin-right:6px; 

}

.logo{
    width:300px;
    margin:6px auto;
}

.intownLogo{
    width:255px;
    margin:6px auto;
}

.spaces{
    margin-top:8px; 
}

js:

   $(function() {
        // Hide all the content except the first
        //$('.accordian li:odd:gt').hide();
        $('.accordian li:odd').hide();


        // Add the dimension class to all the content
        $('.accordian li:odd').addClass('dimension');

        // Set the even links with an 'even' class
        $('.accordian li:even:even').addClass('even');

        // Set the odd links with a 'odd' class
        $('.accordian li:even:odd').addClass('odd');

        // Show the correct cursor for the links
        $('.accordian li:even').css('cursor', 'pointer');

        // Handle the click event
        $('.accordian li:even').click( function() {
            // Get the content that needs to be shown
            var cur = $(this).next();

            // Get the content that needs to be hidden
            var old = $('.accordian li:odd:visible');

            // Make sure the content that needs to be shown 
            // isn't already visible
            if ( cur.is(':visible') )
                return false;

            // Hide the old content
            old.slideToggle(500);

            // Show the new content
            cur.stop().slideToggle(500);

        } );
    });

私のjqueryはせいぜい初心者なので、それが何をしているのかはわかりませんが、それを壊さずに編集することはできません...主は私が試したことを知っています笑。

私が問題を抱えている部分は、これらのタブでは機能しますが、.next() 関数などで機能するため、タブが開いているときに同じタブをクリックして閉じると、閉じないことです。別のタブがクリックされたときにのみ閉じます。

私が助けを必要としているのは....何か言うことです

「ロジック」このタブがすでに開いていてクリックされた場合、現在開いているタブを閉じます。つまり、たとえば、上記のコードに基づいて

疑似コードが来る：

if ( cur.is(':visible') && cur.is(':clicked') )
        cur.slideToggle();

高度なご協力ありがとうございます。

4

1 に答える 1

1

.toggle()イベントを使用できます。単純です。関数をパラメーターとして渡します。ターゲットをクリックすると、各機能が順番に実行されます。簡単な例:

cur.toggle(
    function()    //function 1
    {
        cur.show();
    },
    function()    //function 2
    {
        cur.hide();
    }
);

初めてクリックすると、最初の関数が実行されcur.show();ます。次にクリックすると、2 番目の関数 running が実行されcur.hide();ます。もう一度クリックすると、最初の機能が再び実行されます。さらに機能を追加することもできるため、1 回目から n 回目のクリックで特定の機能を何度も使用できます。

于 2012-04-10T20:46:31.420 に答える