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

Question

I am currently in need of my Bootstrap Nav-Tabs to do a few things. I need them to:

(once tab li has been clicked)

• onClick: If tabs are closed open them. If they open, at the same scope/stack/bubble of code operation, I need a div directly above it to dissappear making the page smaller and moving the Nav-Tabs up underneath something else which looks graphically cool. :)

• onClick: If a tab is clicked on that is already opened the tab section closes and the div that closed above slides back down and fills the space. (no the accordian component doesnt work here its the wrong kind of click transition)

• onClick: If the tabs are open and the person clicks on a different tab than is open in the content div it simply switches to it like normal.

Therefore I have been trying to figure out the appropriate timing during the event of a click happening, in these new languages to me. I am using JQuery because the transitions are what I was looking for. I have a $('.link').on('click', function() {} ) and I have been trying a .bind('click', function() {} ) or even a .click() or on('click', function() {} ) I can't figure out which event I need to have happen.

Here is my code so far:

(Sorry about the spacings, it auto spaced very wierdly when I pasted it in :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

I don't think that I need to provide the HTML here because this can be given back to me in Pseudo code with a naming convention using understandable simple terms like <div id="containerToHide"> etc...

As I mentioned above the #learnMoreBox is the placed above my Nav-Tabs that will disappear when the tabs are confirmed to be open. The #tabContentId is the div where my class="data-content" lives.

Currently the site works to an extent. When the tabs are clicked on they work like tabs when clicking between Index# 0 - 4. However anytime the person clicks on a tab AND any of them are active, it toggles the slide. I only want this to happen when they click on the tab that is showing. Not just any tab...

I know I need to find the id of the <a href=""> that HAS BEEN CLICKED ON. lol. I say that loudly because thats the 1 and only problem I am having so far. I have been trying to play with it and make my liClicked variable show me which one of my .link class <a href=""> list items was clicked and compare it to my tabOpenName variable to see if they clicked on the tab that was open.

I was hoping initially not to compare strings I was hoping to have the variables point to the selectedIndex number of the tab open and have conditionals that say if(selectedIndex == 0 && tabOpenName == 'Home') then {slide} ... etc. Im sure you can see where I am going with this.

Now your probably wondering... gee... why does he have that alert in the last part? lol. Its because I have found no IDE, Chrome Dev Tools or software to let me step through JQuery and thats how I traditionally learn languages. Therefore I was using the alert to see if I could somehow find a way to return a string inside the alert. If I could get a string to return in the alert I could easily compare it... The tabOpenName in the alert shows the exact string of the currently opened tab.

Help would be greatly appreciated.

Answer 1

First of all, .on('click', function() {...}) is jQuery's preferred method for binding event handlers and .bind() is the method to use with older versions of jQuery. Also, .click(function() {...}) is a shortcut for .on('click', function() {...}) but .click() without an event handler passed in is a trigger for the click event. Just in case you had any confusion on that front.

Also, simply putting "debugger" in your code will cause Chrome Dev Tools to pause execution and open a debugger interface when you reach that line. For example:

if (isOpen == true) {

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


} // end if

Also refer to Debugging JavaScript at the Google Developers website for more info on using Chrome Dev Tools to debug JavaScript code.

Finally, I'm not sure how much I can do without more context/code. Where do you add an "active" class to your list items? Also it seems like you set isOpen to true and never set it to false again which will cause the " #tabContentId " and " #learnMoreBox " to slide every time a list item is clicked regardless of the situation.

//Edit 1: Here's what I would try, it might not work with exactly what you're set up but hopefully I can get the gist of my thinking across.

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

I'm still sort of guessing at the setup you have and what you want to happen, but an event handler set up like that hopefully can achieve what you want?