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

Question

我目前需要我的 Bootstrap 导航选项卡来做一些事情。我需要他们：

（一旦点击了标签 li）

• onClick：如果选项卡已关闭，请打开它们。如果它们在代码操作的相同范围/堆栈/气泡中打开，我需要一个直接在其上方的 div 来消失，使页面更小，并将导航选项卡向上移动到其他看起来很酷的东西下方。 :)

• 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"> 等）的命名约定以伪代码形式返回给我...

正如我上面提到的，#learnmorebox是放置在我的导航标签上方时，当确认标签打开时会消失。 #tabContentId 是我的 class="data-content" 所在的 div。

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

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

我最初希望不要比较字符串，我希望变量指向打开的选项卡的 selectedIndex 编号，并有条件说 if(selectedIndex == 0 && tabOpenName == 'Home') then {slide} ... 等等。我相信你可以看到我在哪里和这个一起去。

现在你可能想知道......天啊......为什么他在最后一部分有alert？哈哈。这是因为我没有找到可以让我逐步了解 JQuery 的 IDE、Chrome 开发工具或软件，而这就是我传统上学习语言的方式。因此，我使用警报来查看是否可以找到一种方法在警报中返回字符串。如果我可以在警报中返回一个字符串，我可以轻松地比较它...警报中的 tabOpenName 显示当前打开的选项卡的确切字符串。

我们将不胜感激。

Answer 1

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

此外，只要在代码中添加“调试器”，Chrome 开发工具就会暂停执行，并在您到达该行时打开调试器界面。例如：

if (isOpen == true) {

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


} // end if

另请参阅 Google Developers 网站上的Debugging JavaScript，了解有关使用 Chrome 开发工具调试 JavaScript 代码的更多信息。

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

//编辑 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

我仍然在猜测你的设置和你想要发生的事情，但是这样设置的事件处理程序有望实现你想要的？