Question

我正在尝试使用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>

的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-left");
    left_panel = $(".panel-left")[0];
    right_panel = $(".panel-right")[0];
    close_left_nav = $("#close-left");
    close_right_nav = $("#close-right");
    left_btn.click(function() {
        left_panel.css("left", 0);
        close_left_nav.click(function() {
            left_panel.css("left", "-80%");
        });
    });
    right_btn.click(function() {
        right_panel.css("right", 0);
        close_right_nav.click(function() {
            right_panel.css("right", "-80%");
        });
    });
});

但它不起作用。当我使用$（“。panel-left”）时它可以工作;或$（“。panel-right”）;

Answer 1

试试这个：

<强> 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>

如何使用jquery构建侧面导航

1 个答案: