切换 div - javascript

Question

(我的java脚本是基础的，正在学习中) 我正在尝试使用我在此处找到的脚本中的一些复制粘贴来制作菜单导航，但结果并不像我想要的那样完美。

这就是重点，我想要：

点击一个--div--

1. 从它的 -ul- 中显示 -li-
2. 其他 –div– 隐藏
3. 单击 -li- 链接不会显示其他 -div-，它们保持隐藏状态

点击返回相同的-div-

4. 全部-li-隐藏

5. 显示所有其他 –div– 和 –ul–（不是 –li–）

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

谢谢！

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

$(".SHOW").click(function(){
  $(this).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">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>

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>