如何在兩個不同的ID /類中使用相同的切換註釋

我想做一個擴展的側邊欄，我能夠使側邊欄擴展，但是我需要覆蓋按下的原始按鈕。如何在兩個不同的ID /類中使用相同的切換註釋

我想在側面有一個區域，我可以點擊關閉邊欄。

我快到了。我遇到的問題是點擊時關閉ID似乎沒有觸發切換。

這裏是我的代碼

$("#icon-menu-mobile,#exit").each(function() { 
 
    $(this).click(function() { 
 
    var effect = 'slide'; 
 
    var options = 'left'; 
 
    var duration = 500; 
 

 
    $('#panel').toggle(effect, options, duration); 
 
    }); 
 
});

#panel { 
 

 
    position: absolute; 
 

 
    top: 0px; 
 

 
    width: 100%; 
 

 
    height: 100%; 
 

 
    background-color: rgba(0, 0, 0, 0.3); 
 

 
    display: none; 
 

 
    z-index: 999; 
 

 
} 
 

 
.panelcontent { 
 

 
    position: relative; 
 

 
    top: 50px; 
 

 
    width: 70%; 
 

 
    height: 100%; 
 

 
    background-color: #cccccc; 
 

 
    float: left; 
 

 
} 
 

 
#icon-menu-mobile { 
 

 
    width: 36px; 
 

 
    height: 30px; 
 

 
    cursor: pointer; 
 

 
    font-size: 24px; 
 

 
} 
 

 
#icon-menu-mobile, 
 

 
#exit { 
 

 
    position: static; 
 

 
    float: right; 
 

 
    width: 30%; 
 

 
    height: 100%; 
 

 
    cursor: pointer; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
<body> 
 

 

 
    <span id="icon-menu-mobile"> 
 
\t ☰ \t \t \t \t \t \t 
 
</span> 
 

 
    <div id="panel"> 
 
    <div class="panelcontent"> 
 
     Some text here to fill it out 
 

 
    </div> 
 
    <div id="exit"> 
 
     Click here to exit 
 
    </div> 
 

 
    </div> 
 

 
</body>

正如你可以看到單擊菜單漢堡後，你不能一邊關閉按鈕關閉它。

我在猜測，切換隻能從點擊的第一個ID開始工作，並且需要再次點擊該ID再次切換。

有沒有辦法讓兩個ID激活相同的切換？

來源

2016-02-12 MKBeans

這裏有一個工作示例：http://codepen.io/anon/pen/pgGPrm

我認爲你將相同事件雙方，所以它不會滑動到相反的方向，我已經把它分解成：

$("#icon-menu-mobile").click(function() { 
    var effect = 'slide'; 
    var options = 'left'; 
    var duration = 500; 

    $('#panel').toggle(effect, options, duration); 
}); 

$("#exit").click(function() { 
    var effect = 'slide'; 
    var options = 'right'; 
    var duration = 500; 

    $('#panel').toggle(effect, options, duration); 
});

編輯：實際上經過進一步檢查，它們似乎並不重要，如果他們在一起或不。修復它實際上包括jQuery-UI在我的codepen中的東西。你確定你正確地包括jQuery-UI？否則在第一張幻燈片後出現錯誤，從而導致第二張幻燈片無法正常工作

來源

2016-02-12 21:12:11 Pabs123

我想我是這樣做的。是這個嗎？很奇怪，演示效果很好，但在我的網站上它只能打開。關閉不起作用... – MKBeans

嘗試' ' – Pabs123

繁榮工程。謝謝。 – MKBeans

回答

相關問題