需要Bootstrap Nav-Tabs显示和隐藏onClick?

时间:2013-06-21 12:34:54

标签: jquery twitter-bootstrap tabs onclick show-hide

我目前需要使用Bootstrap Nav-Tabs来做一些事情。我需要他们:

(点击标签li后)

  • onClick:如果选项卡已关闭,请打开它们。如果它们打开,在相同的范围/堆栈/气泡代码操作中,我需要在它上面的div直接消失,使页面变小并将Nav-Tabs移动到看起来图形酷的其他东西下面。 :)

  • onClick:如果单击了一个已打开的选项卡,则选项卡部分将关闭,上面关闭的div将向下滑动并填充空格。 (没有手风琴组件在这里工作的是错误的点击过渡)

  • onClick:如果标签处于打开状态且用户点击了与内容div中打开的标签不同的标签,则只需正常切换到标签。

因此,我一直试图在发生点击事件时找出合适的时机,这些新语言对我来说。我正在使用JQuery,因为转换是我正在寻找的。我有$('.link').on('click', function() {} )我一直在尝试.bind('click', function() {} )甚至是.click()on('click', function() {} )我无法弄清楚我需要发生哪些事件。

到目前为止,这是我的代码:

(抱歉这个间距,当我粘贴它时,它自动间隔很大:S)

    var isOpen = false;
    var tabOpenName = "";
    var liClicked = ""; 

    $(document).ready(function() {
        $(".link").on("click", function(event) {

        liClicked = $(event.target).valueOf("id"); //Grab link clicked

    // begin loop - Li
    $("#tabMenu li").each(function(index, li) {
        var currentListItem = $(li);

        if (currentListItem.attr("class") == "active"){
                isOpen = true;
                        tabOpenName = $(li).prop("id"); //Grab tab open

        } // end if

    }); // end selection loop


    if (isOpen == true) {

        alert(liClicked);       
        $("#tabContentId").slideToggle("slow");
        $("#learnMoreBox").slideToggle("slow");


    } // end if

    }) //end .on event
    }); // end query

我认为我不需要在这里提供HTML,因为这可以通过使用可理解的简单术语(如<div id="containerToHide">等)的命名约定以伪代码的形式返回给我。

正如我上面提到的那样,#edgeMoreBox位于我的Nav-Tabs上方,当确认标签打开时,它将消失。 #tabContentId是我的class="data-content"所在的div。

目前该网站在某种程度上有效。当单击选项卡时,它们在索引#0 - 4之间单击时像标签一样工作。但是,无论何时用户单击选项卡并且其中任何一个处于活动状态,它都会切换幻灯片。我只想在他们点击显示的标签时发生这种情况。不只是任何标签...

我知道我需要找到已被点击的<a href="">的ID。大声笑。我大声说,因为那是我迄今为止唯一的问题。我一直在尝试使用它并让我的liClicked变量显示我点击了哪个.link类<a href="">列表项并将其与我的tabOpenName变量进行比较以查看它们是否存在单击已打开的选项卡。

我希望最初不要比较字符串,我希望变量指向打开的标签的selectedIndex号,并且条件有if(selectedIndex == 0 && tabOpenName == 'Home') then {slide} ...等等。我相信你可以看看我要去哪里。

现在你可能想知道......哎......为什么他在最后一部分有alert?大声笑。这是因为我找不到IDE,Chrome开发工具或软件让我逐步完成JQuery,这就是我传统上学习语言的方式。因此,我正在使用警报,看看我是否能以某种方式找到一种方法在警报内返回一个字符串。如果我可以在警报中返回一个字符串,我可以轻松地比较它...警报中的tabOpenName显示当前打开的选项卡的确切字符串。

非常感谢帮助。

1 个答案:

答案 0 :(得分:2)

首先,.on('click', function() {...})是jQuery首选的绑定事件处理程序的方法,而.bind()是用于旧版jQuery的方法。此外,.click(function() {...}).on('click', function() {...})的快捷方式,但没有传入事件处理程序的.click()是click事件的触发器。万一你在这方面有任何困惑。

此外,只需在代码中加入“调试器”,Chrome Dev Tools即可暂停执行,并在到达该行时打开调试器界面。例如:

if (isOpen == true) {

    debugger     
    $("#tabContentId").slideToggle("slow");
    $("#learnMoreBox").slideToggle("slow");


} // end if

有关使用Chrome开发工具调试JavaScript代码的详情,请参阅Google Developers网站上的Debugging JavaScript

最后,如果没有更多的上下文/代码,我不知道能做多少。在哪里为列表项添加“活动”类?此外,您似乎将isOpen设置为true并且再也不将其设置为false,这将导致每次单击列表项时“#tabContentId”和“#learnMoreBox”都会滑动,无论情况如何。< / p>

//编辑1:这就是我要尝试的内容,它可能不适用于您所设置的内容,但希望我能够理解我的想法。

var isOpen = false;
var tabOpenName = "";
var liClicked = ""; 

$(document).ready(function() {
    $(".link").click(function() {

        liClicked = $(this).attr("id"); //Grab id of link clicked

        if (isOpen) { //If there is an open link somewhere
            if ($(this).hasClass("active")) { //If the link just clicked is open
                $(this.).removeClass("active");
                isOpen = false; //Now there shouldn't be any link open
                $("#tabContentId").slideToggle("slow");
                $("#learnMoreBox").slideToggle("slow");
            } else { //If another link somewhere is open

                //Find and close the currently active link
                $(this).parent().find("li.active").removeClass("active");
                $(this).addClass("active"); //Mark this link as active

                //Do the content containers slide here? I'm still not clear on that haha

            } //End if-else cases where there is anything open at all
        } else { //Case where nothing is currently open
            $(this).addClass("active"); //Mark this link as open

            //Toggle the content area sliding animation
            $("#tabContentId").slideToggle("slow");
            $("#learnMoreBox").slideToggle("slow");

            isOpen = true; //We've opened a link now
        } //End If-Else

    }) //end click event handler
}); // end query

我仍然在猜测你拥有的设置和你想要发生的事情,但是一个像这样的事件处理程序设置可以达到你想要的效果吗?