切换div - javascript

Question

（我的java脚本是基本的，我在学习过程中） 我正在尝试使用我在这里找到的脚本进行一些复制粘贴的菜单导航，但结果并不像我想的那样完美。

这就是重点，我想：

点击一个-div -

1. 从-ul-
显示-li-
2. 其他-div-隐藏
3. 点击-li-链接不会显示其他人--div-，他们会隐藏

点击相同的-div -

1. 全部隐藏

2. 显示所有其他人-div-和-ul-（不是-li - ）

希望问题很清楚，我感谢任何评论。

谢谢！

＆＃13;
＆＃13;
$(document).ready(function () {
    $("ul").click(function (evt) {      
        if(evt.target.tagName != 'UL') 
            return;
        $("li", this).toggle();
    });
});

$(".SHOW").click(function(){
  $(this).siblings("div").toggle();
  
  
});
＆＃13;
ul li{list-style: none;}
a {text-decoration: none;}
ul a {color: black;}
li a {color: #493A3A;; }

.GER, .ARG, .SPAIN {
    position: absolute;
    width: 200px;
    text-align: center;
    border: solid 2px gray;
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-heigth: 40px;
}

.ARG {left: 220px; top: 8px}
.SPAIN {left: 431px; top: 8px}

.GERLI, .ARGLI, .SPALI {font-size: 18px; height: 35px; line-height:36px; display:none}

.GERLI:nth-child(1) {background-color: yellow;}
.GERLI:nth-child(2) {background-color: Red;}
.GERLI:nth-child(3) {background-color: Black;}
.ARGLI:nth-child(1) {background-color: lightblue;}
.ARGLI:nth-child(2) {background-color: white;}
.ARGLI:nth-child(3) {background-color: lightblue;}
.SPALI:nth-child(1) {background-color: red;}
.SPALI:nth-child(2) {background-color: yellow;}
.SPALI:nth-child(3) {background-color: red;}

.GER:hover, .ARG:hover, .SPAIN:hover{background-color: lightgray;}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SHOW">
    <ul class="GER">Germany
        <li class="GERLI"><a href="http://blank.org/" target="_blank">Bratwurst</a></li>
        <li class="GERLI"><a href="http://blank.org/"target="_blank">Chucrut</a></li>
        <li class="GERLI"><a href="http://blank.org/"target="_blank">Ketchup</a></li>
    </ul>
</div>

<div class="SHOW">
    <ul class="ARG">Argentina
        <li class="ARGLI"><a href="http://blank.org/"target="_blank">Churrasco</a></li>
        <li class="ARGLI"><a href="http://blank.org/"target="_blank">Mate</a></li>
        <li class="ARGLI"><a href="http://blank.org/" target="_blank">Pampa</a></li>
    </ul>
</div>

<div class="SHOW">
    <ul class="SPAIN">Spain
        <li class="SPALI"><a href="http://blank.org/" target="_blank">Paella</a></li>
        <li class="SPALI"><a href="http://blank.org/" target="_blank">Flamenco</a></li>
        <li class="SPALI"><a href="http://blank.org/" target="_blank">Toros</a></li>
    </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

jsfiddle：

jsfiddle

Answer 1

你并不认为这些是盒子，当你点击一个li时，你实际上是在点击整个ul和div。您不仅需要指定要点击的内容，还需要开始使用ID，类只能使用javascript。我在这里修好了

$(document).ready(function () {
    $("ul").click(function (evt) {      
        if(evt.target.tagName != 'UL') 
            return;
        $("li", this).toggle();
    });
});

$(".GER").click(function(e){
  if(e.target.id === "GER")
  	$(this).parent().siblings("div").toggle();  
});

$(".ARG").click(function(e){
  if(e.target.id === "ARG")
  	$(this).parent().siblings("div").toggle();  
});

$(".SPAIN").click(function(e){
  if(e.target.id === "SPA")
  	$(this).parent().siblings("div").toggle();  
});

ul li{list-style: none;}
a {text-decoration: none;}
ul a {color: black;}
li a {color: #493A3A;; }

.GER, .ARG, .SPAIN {
    position: absolute;
    width: 200px;
    text-align: center;
    border: solid 2px gray;
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-heigth: 40px;
}

.ARG {left: 220px; top: 8px}
.SPAIN {left: 431px; top: 8px}

.GERLI, .ARGLI, .SPALI {font-size: 18px; height: 35px; line-height:36px; display:none}

.GERLI:nth-child(1) {background-color: yellow;}
.GERLI:nth-child(2) {background-color: Red;}
.GERLI:nth-child(3) {background-color: Black;}
.ARGLI:nth-child(1) {background-color: lightblue;}
.ARGLI:nth-child(2) {background-color: white;}
.ARGLI:nth-child(3) {background-color: lightblue;}
.SPALI:nth-child(1) {background-color: red;}
.SPALI:nth-child(2) {background-color: yellow;}
.SPALI:nth-child(3) {background-color: red;}

.GER:hover, .ARG:hover, .SPAIN:hover{background-color: lightgray;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SHOW">
    <ul class="GER" id="GER">Germany
        <li class="GERLI"><a href="">Bratwurst</a></li>
        <li class="GERLI"><a href="">Chucrut</a></li>
        <li class="GERLI"><a href="">Ketchup</a></li>
    </ul>
</div>

<div class="SHOW">
    <ul class="ARG" id="ARG">Argentina
        <li class="ARGLI"><a href="">Churrasco</a></li>
        <li class="ARGLI"><a href="">Mate</a></li>
        <li class="ARGLI"><a href="">Pampa</a></li>
    </ul>
</div>

<div class="SHOW">
    <ul class="SPAIN" id="SPA">Spain
        <li class="SPALI"><a href="">Paella</a></li>
        <li class="SPALI"><a href="">Flamenco</a></li>
        <li class="SPALI"><a href="">Toros</a></li>
    </ul>
</div>