Javascript切換狀態功能

Question

我的js文件中有兩個函數：

function all_opened()
{
    allToggle(true);
}   

function all_closed()
{
   allToggle(false);
}

我需要在單個函數中調用的兩個函數，例如function openclose()

還有我的HTML代碼：

<a href="#" onclick="">Open/Close</a>    

Answer 1

像這樣：

//define some global js variable, for storing the state
var currentStateOpened = true;
function openclose() {
  //check if state is true or false
  if(currentStateOpened) {  //if state is open then close
     allToggle(false);
     currentStateOpened = false; // set the global state to false
  }
  else {
    allToggle(true);
    currentStateOpened = true; // set the global state to true
  }
}
//And
<a href="#" onclick="openclose(); return false;">Open/Close</a>

Answer 2

這是一個完整的，跨瀏覽器且可擴展的選項。 查看代碼中的注釋以獲取描述。 隨意在您喜歡的任何項目中使用它。

CSS：

<style type="text/css">
a {
 text-decoration: none;
 outline: none;
}
div.TogWrap {
    width: 400px;
    padding: 12px;
}

/* classes .on and .off are for the links */
.off {
    border: 1px solid #bebebe;
    padding: 7px 8px;
    background: #df7623;
    color: #fff;
}
.on {
    border: 1px solid #bebebe;
    padding: 7px 8px;
    background: #bf7623;
    color: #fff;
}

/* classes .hide and .show are used for the content */
.hide {
    display: none;
}
.show {
    display: block;
    margin-top: 8px;
    border: 1px solid #bebebe;
    padding: 16px 10px 10px 10px;
    background: #ededed;
}
</style>

JavaScript：

<script type="text/javascript">
/* Cross-Browser Event functions (required) */
function addEvent (eventObj, event, codeToExecute) {
    if (eventObj.addEventListener) {
        eventObj.addEventListener(event, codeToExecute, false );
        return true;
    } else if (eventObj.attachEvent) {
        event = "on" + event;
        eventObj.attachEvent(event, codeToExecute);
    } else {
        eventObj['on' + event] = codeToExecute;
    }
}
function cancelEvent(event) {
    if (event.preventDefault) {
        event.preventDefault();
        event.stopPropagation();
    } else  {
        event.returnValue = false;
        event.cancelBubble = true;
    }
}


/* The function that does the hide/show */
function toggleIt (thisEl, thisContent) {
        var el = document.getElementById(thisEl);
        var content = document.getElementById(thisContent);
        content.className = "hide"; //initially hide the contents
        el.className = "off"; //and set the links class to off (optional)

        var toggle = function (event) { //capture the event that was triggered
                switch (event.type) { //check if it was a click event
                    case 'click': //if click
                        content.className = content.className === 'hide' ? 'show' : 'hide'; //self explanatory
                        el.className = content.className === 'hide' ? 'off' : 'on'; //self explanatory (optional)
                        break;
                }
                cancelEvent(event); //prevent the link from following the href attribute
            };

         addEvent (el, 'click', toggle); //onclick call the toggle function
    }


/* Set up function */
function initToggles () {

    //Array of IDs for the links that are clicked - add as many as you need
    var allTriggers = [
        'togTrigger1',
        'togTrigger2'
    ];

    //Array of IDs for the content that you want to hide/show - add as many as you need
    var allContents = [
        'content1',
        'content2'
    ];

    var i = 0,  arrLen = allTriggers.length;
    for (i; i < arrLen; i += 1) {
        toggleIt(allTriggers[i], allContents[i]);
    }
}

/*  the same as window.onload */
addEvent (window, 'load', initToggles);
</script>

HTML：

<!--You can add as many of these as you need. Just follow the same pattern as I have below -->
<div class="TogWrap">
    <a href="#" id="togTrigger1" class="">Open it / Close it</a>
    <p id ="content1" class="togContent">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna.
      Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada
      convallis, sagittis vitae, convallis sit amet, lectus.
    </p>
</div>

<p>&nbsp;</p>

<!--Here is another one following the same pattern-->
<div class="TogWrap">
    <a href="#"  id="togTrigger2" class="">Open it / Close it</a>
    <p  id ="content2" class="togContent">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna.
      Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada
      convallis, sagittis vitae, convallis sit amet, lectus.
    </p>
</div>

希望對您有所幫助！ :)

Answer 3

您可以在代碼中存儲用於存儲布爾值的標志，並檢查函數本身：

flag = false;

function allToggle(){
 flag = !flag ? false : true;
 //rest of the code 
}