如何使用jquery构建侧导航

我正在尝试使用jquery构建一个侧导航菜单。我想要两个导航-左导航和右导航，并且当我在导航之外单击时，它应该被关闭。下面是我的代码

样式化的CSS

.panel > h1 {
    position: relative;
    display: block;
    margin: 0 30%;
    padding: 1em 0;
    color: #efebe9;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel > a {
    position: absolute;
    display: inline-block;
    top: 0.75em;
    padding: 0.375em;
    max-width: 22%;
    font-size: 1em;
    text-align: center;
    text-decoration: none;
    color: #efebe9;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel > a.close {
    right: 0.5em;
}

.panel {
    position: fixed;
    top: 0;
    padding: 0;
    width: 80%;
    min-height: 100%;
    background-color: #5e412f;
    border: 1px solid black;
    transition: 0.5s;
}

.panel-left {
    left: -80%;
    z-index: 1001;
}

.panel-right {
    right: -80%;
    z-index: 1001;
}

.panel > ul.list {
    margin: 0;
    width: 100%;
}

.list {
    position: relative;
    margin: 1em 2.5%;
    padding: 0;
    list-style-type: none;
    background-color: white;
    width: 95%;
}

.list > li > a {
    position: relative;
    display: block;
    margin: 0;
    padding: 1em 0.5em;
    color: #05a800;
    font-size: 1em text-align: left;
    text-decoration: none;
}

.list > li {
    border-left: 1px solid #a1887f;
    border-right: 1px solid #a1887f;
    border-bottom: 1px solid #a1887f;
}

.list > li:first-child {
    border-top: 1px solid #a1887f;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.list > li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

HTML标记

<div id="panel-left" class="panel panel-left">
    <h1>Left panel </h1>
    <a href="#" class="close" id="close-left">Close</a>
    <ul class="list">
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
    </ul>
</div>
<div class="panel panel-right">
    <h1>Left panel </h1>
    <a href="#" class="close" id="close-right">Close</a>
    <ul class="list">
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
    </ul>
</div>

但它不起作用。当我使用$（“.panel left”）；或美元（“.panel right”）

试试这个：

Html

<button id="btn-left">Left</button>
<button id="btn-right">Right</button>
<div id="panel-left" class="panel panel-left">
    <h1>Left panel </h1>
    <a href="#" class="close" id="close-left">Close</a>
    <ul class="list">
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
    </ul>
</div>
<div class="panel panel-right">
    <h1>Left panel </h1>
    <a href="#" class="close" id="close-right">Close</a>
    <ul class="list">
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
        <li><a href="#">Link Item1</a></li>
    </ul>
</div>

左
赖特
左面板







左面板

Java脚本

    <script type="text/javascript">


     $(document).ready(function() {
    var left_btn, right_btn, left_panel, right_panel, close_left_nav, close_right_nav;
    left_btn = $("#btn-left");
    right_btn = $("#btn-right");
    left_panel = $(".panel-left");
    right_panel = $(".panel-right");
    close_left_nav = $("#close-left");
    close_right_nav = $("#close-right");
    open_div=false;
    left_btn.click(function() {
      if(open_div == false){
        left_panel.css("left", 0);        
         open_div=true;
        close_left_nav.click(function() {
            left_panel.css("left", "-80%");
            right_btn.attr("disabled",false);
            open_div=false;
        });
      }
    });
    right_btn.click(function() {
      if(open_div == false){        
        right_panel.css("right", 0);

        open_div=true;
        close_right_nav.click(function() {
            right_panel.css("right", "-80%");
            left_btn.attr("disabled",false);
            open_div=false;
        });
      }
    });

    $(document).on("mouseup","body",function(e) {    
    container=$('.panel-left');    
    if (!container.is(e.target) && (!right_btn.is(e.target)) && (!left_btn.is(e.target)) && container.has(e.target).length === 0) 
    {
        container.css("left", "-80%");
        right_btn.attr("disabled",false);
        open_div=false;
    }

    container=$('.panel-right');

    if (!container.is(e.target) && (!left_btn.is(e.target)) && (!right_btn.is(e.target)) && container.has(e.target).length === 0) 
    {
        container.css("right", "-80%");
        left_btn.attr("disabled",false);
        open_div=false;
    }

  });
});

    </script>

$（文档）.ready（函数（）{
var left_btn、right_btn、left_面板、right_面板、close_left_nav、close_right_nav；
左btn=$（“#btn左”）；
右边的btn=$（“#btn右边”）；
左面板=$（“.panel left”）；
右面板=$（“.panel right”）；
左关闭导航=$（“#左关闭”）；
右关闭导航=$（“#右关闭”）；
open_div=false；
左键单击（函数（）{
if（open_div==false）{
左面板css（“左”，0）；
open_div=true；
关闭左导航。单击（函数（）{
css（“左”、“-80%”；
右属性（“禁用”，错误）；
open_div=false；
});
}
});
右键单击（函数（）{
如果（open_div==false）{
右面板css（“右”，0）；
open_div=true；
关闭右导航。单击（函数（）{
右面板.css（“右”和“-80%”）；
左属性（“禁用”，错误）；
open_div=false；
});
}
});
$（文件）.on（“鼠标”、“正文”，函数（e）{
容器=$（'.panel left'）；
如果（！container.is（e.target）&&（！right_btn.is（e.target））&&（！left_btn.is（e.target））&&container.has（e.target）。长度===0）
{
css（“左”、“-80%”；
右属性（“禁用”，错误）；
open_div=false；
}
容器=$（'.panel right'）；
如果（！container.is（e.target）&&（！left_btn.is（e.target））&&（！right_btn.is（e.target））&&container.has（e.target）。长度===0）
{
css（“右”和“-80%”）；
左属性（“禁用”，错误）；
open_div=false；
}
});
});

这对我很有用。当我在导航外单击时，它会隐藏，但当左导航打开，我单击右按钮时，左导航会隐藏，右导航会打开，我不想我想如果我们禁用所有不在侧导航内的链接，我想要的东西就很容易实现了。因此，当链接被禁用时，它们的行为将类似于其他html标记，并且只有一个导航将关闭，而另一个将不会同时打开。我认为，如果我们禁用所有不在侧边导航中的链接，那么我想可以很容易地做到这一点。因此，当左侧导航打开时，所有其他链接都将被禁用，它们的行为将类似于其他html标记，并在导航外部单击，只有左侧导航将关闭，而其他导航将不会同时打开是的，如果您同时只想打开一个菜单，则可以禁用其他菜单。很抱歉，您以前的代码比这要好得多。因为它同时打开两个导航，而前面的代码只同时打开一个导航。在以前的代码中唯一的缺点是，如果您的左导航是打开的，并且您单击右导航btn，那么左导航将隐藏，右导航将显示。

    <script type="text/javascript">


     $(document).ready(function() {
    var left_btn, right_btn, left_panel, right_panel, close_left_nav, close_right_nav;
    left_btn = $("#btn-left");
    right_btn = $("#btn-right");
    left_panel = $(".panel-left");
    right_panel = $(".panel-right");
    close_left_nav = $("#close-left");
    close_right_nav = $("#close-right");
    open_div=false;
    left_btn.click(function() {
      if(open_div == false){
        left_panel.css("left", 0);        
         open_div=true;
        close_left_nav.click(function() {
            left_panel.css("left", "-80%");
            right_btn.attr("disabled",false);
            open_div=false;
        });
      }
    });
    right_btn.click(function() {
      if(open_div == false){        
        right_panel.css("right", 0);

        open_div=true;
        close_right_nav.click(function() {
            right_panel.css("right", "-80%");
            left_btn.attr("disabled",false);
            open_div=false;
        });
      }
    });

    $(document).on("mouseup","body",function(e) {    
    container=$('.panel-left');    
    if (!container.is(e.target) && (!right_btn.is(e.target)) && (!left_btn.is(e.target)) && container.has(e.target).length === 0) 
    {
        container.css("left", "-80%");
        right_btn.attr("disabled",false);
        open_div=false;
    }

    container=$('.panel-right');

    if (!container.is(e.target) && (!left_btn.is(e.target)) && (!right_btn.is(e.target)) && container.has(e.target).length === 0) 
    {
        container.css("right", "-80%");
        left_btn.attr("disabled",false);
        open_div=false;
    }

  });
});

    </script>