的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

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

flag = false; 

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

Answer 3

這是一個完整的，跨瀏覽器的，可擴展的選項。請查看代碼中的說明。隨意在你喜歡的任何項目中使用它。

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> 

我希望它能幫助！ :)