Question

这么长的故事很简短，我正在使用一些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（）函数等，因此当选项卡打开时，如果我单击相同的选项卡关闭，它就不会t close，仅在单击另一个选项卡时关闭。

我需要帮助的是... ......说的话

“logic”如果此选项卡已打开并单击，请关闭当前打开的选项卡。所以说，例如，基于上面的代码

伪代码来了：

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

感谢您提前帮助。

Answer 1

您可以使用.toggle()事件。这很简单 - 您将其作为参数传递。单击目标时，每个功能都会依次运行。一个简单的例子：

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

第一次单击时，它会运行第一个函数，执行cur.show();。下一次单击运行第二个函数，运行cur.hide();。再次单击会再次运行第一个函数，依此类推，依此类推。您甚至可以添加更多功能，因此您可以在第1次到第n次点击时一遍又一遍地使用特定功能。

我需要一些TAB代码，Jquery的帮助

1 个答案: