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充其量是noobish，所以虽然我不知道它在做什么，但我无法在不破坏它的情况下对其进行编辑......上帝知道我试过大声笑。

我遇到的问题是，对于这些选项卡，虽然它们可以工作，但它们可以与 .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();. 下一次单击运行第二个函数 running cur.hide();。再次单击再次运行第一个函数，依此类推。您甚至可以添加更多功能，因此您可以在第 1 次到第 n 次点击时拥有特定的功能，一遍又一遍。

于 2012-04-10T20:46:31.420 回答