如何切換邊欄當你點擊它們的元素？

我有以下sidenavbar：http://bootsnipp.com/snippets/featured/fancy-sidebar-navigation 如何切換邊欄當你點擊它們的元素？

一切工作正常，我實現了我的網站，但我想，當你點擊列表中的元素，將sidenavbar關閉，我的想法是添加一個id="link-item"並加入js文件，當你點擊元素sidenavbar將關閉。我努力使今天：

的第一次嘗試：

$('#link-item').click(function() { 
    var trigger = $('.hamburger'), 
     overlay = $('.overlay'), 
     isClosed = false; 

    $('#link-item').click(function() { 
    hamburger_cross(); 
    }); 

    function hamburger_cross() { 

    if (isClosed == true) { 
     overlay.hide(); 
     trigger.removeClass('is-open'); 
     trigger.addClass('is-closed'); 
     isClosed = false; 
    } else { 
     overlay.show(); 
     trigger.removeClass('is-closed'); 
     trigger.addClass('is-open'); 
     isClosed = true; 
    } 
    } 

    $('[data-toggle="offcanvas"]').click(function() { 
     $('#wrapper').toggleClass('toggled'); 
    }); 
});

第二次嘗試：

trigger.click(function() { 
    hamburger_cross();  
}); 

$('#link-item').click(function() { 
    hamburger_cross();  
});

來源

2017-01-21 Sn0pY

你意識到'ID = 「LIST_ITEM」'和'＃鏈接item'不匹配？ – Randy

對不起，我寫錯了編號 – Sn0pY

請提供一個與此相關的（最小）HTML，因此它是可測試的。 – trincot

你可以簡單地說T ON的nav .sidebar-nav li元素這樣的觸發運行：

$(document).ready(function() { 
    var trigger = $('.hamburger, nav .sidebar-nav li'), 
     overlay = $('.overlay'), 
    isClosed = false; 

    trigger.click(function() { 
     hamburger_cross();  
    }); 

    function hamburger_cross() { 

     if (isClosed == true) {   
     overlay.hide(); 
     trigger.removeClass('is-open'); 
     trigger.addClass('is-closed'); 
     isClosed = false; 
     } else { 
     overlay.show(); 
     trigger.removeClass('is-closed'); 
     trigger.addClass('is-open'); 
     isClosed = true; 
     } 
    } 

    $('[data-toggle="offcanvas"], nav .sidebar-nav li').click(function() { 
     $('#wrapper').toggleClass('toggled'); 
    }); 
});

我認爲這是一個糟糕的實現雖然。這確實你需要：

$(document).ready(function() { 
    var trigger = $('.hamburger, nav .sidebar-nav li'); 

    trigger.click(function() { 
     $('.overlay').toggle(); 
     trigger.toggleClass('is-open is-closed'); 
     $('#wrapper').toggleClass('toggled'); 
    }); 
});

來源

2017-01-21 11:58:07 Randy

謝謝兄弟，這很好用 – Sn0pY

您的第二個版本好吧，我有一個下拉列表的小問題，但我解決我更改''nav .sidebar-nav li''與一個id，我把id放在''li''和''dropdown''我做了放不下。 – Sn0pY

@ Sn0pY如果您打算多次使用同一個ID，請使用一個班級，ID應該是唯一的。 – Randy

在列表項data-toggle="offcanvas"使用就像

<li> 
    <a id="id" data-toggle="offcanvas" href="#">Home</a> 
</li> 


var trigger = $('.hamburger, #id')

來源

2017-01-21 11:47:49 Ajay

這個問題，我在js中添加'var trigger = $（'。hamburger，#id'）''？ – Sn0pY

邊欄關閉，但疊加層沒有被切換，按鈕是X不是三行 – Sn0pY

也用於列表項目data-toggle =「offcanvas」僅用於示例 – Ajay

如何切換邊欄當你點擊它們的元素？

回答

相關問題