uliの交換用のtoggleClass

Question

こんにちは私はおそらく本当に明白な何かを見逃しています。

私はtoulleClassを作成して、ulの英語を英語からスペイン語に切り替えることを試みています。

スペイン語のテキスト/ボタンをクリックするとスペイン語のulが表示され、英語のテキスト/ボタンをクリックすると英語のulが表示されます。

は、ここで任意のヘルプは大歓迎です

jsfiddle https://jsfiddle.net/TonyTheOnly/k92ayp24/です！

$(document).ready(function(){ 
 
    
 
     $(".burger-nav").on("click", function(){ 
 
      
 
      $("nav ul").toggleClass("open"); 
 
     }); 
 
}); 
 

 

 
$(document).ready(function() { 
 

 
    
 
    $(".spanish").on("click", function() { 
 
     
 
     $("englishNav").toggleClass("spanishNav"); 
 
    }); 
 

 
     $(".english").on("click", function() { 
 
     
 
     $("spanishNav").toggleClass("englishNav"); 
 
    }); 
 
    
 
    });

.spanishNav { 
 
    display:none; 
 
} 
 

 
.spanish{ 
 
    cursor:pointer; 
 
} 
 

 
.english{ 
 
    cursor:pointer; 
 
} 
 
nav { 
 
    float: right; 
 
    padding-right: 10% 
 
} 
 

 
nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    margin-left: 35px; 
 
    padding-top: 25px; 
 
    
 
    position: relative; 
 
    
 
} 
 

 
nav a { 
 
    color: #444; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
} 
 

 

 
     
 
    .burger-nav{ 
 
    display: block; 
 
    height: 40px; 
 
    width: 40px; 
 
    float: right; 
 
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"); 
 
    background-size: cover; 
 
    cursor: pointer; 
 
    } 
 
    
 
    .wrapper { 
 
     width: 100%; 
 
     padding: 0; 
 
    } 
 
    
 
    nav ul { 
 
     overflow: hidden; 
 
     background: white; 
 
     height:0; 
 
     
 
    } 
 

 
    nav ul.open { 
 
     height: auto; 
 
     margin-top:150px; 
 
     margin-right: 100px; 
 
    } 
 
    nav ul li{ 
 
     float:none; 
 
     text-align: left; 
 
     width: 100%; 
 
     margin: 0; 
 
     
 
    } 
 
    nav ul li a { 
 
     color: black; 
 
     padding: 10px; 
 
     border-bottom: 1px solid #404040; 
 
     display: block; 
 
     margin: 0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <nav> 
 
     <a class="burger-nav"></a> 
 
     <ul class="englishNav"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
     <ul class="spanishNav"> 
 
      <li><a href="#">Homeo</a></li> 
 
      <li><a href="#">Abouto</a></li> 
 
      <li><a href="#">Serviceso</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
     <p class="spanish"> 
 
     spanish 
 
     </p> 
 
     <p class="english"> 
 
     english 
 
     </p> 
 
    </nav> 
 
    </div>

Answer 1

あなたは間違ってtoggleClassを使用しているように見えます。 toggleClassは、クラスを追加/削除するためのものです。あなたが望む効果を達成するには、どの言語が選択されているかに応じて、.spanishNavまたは.englishNavの要素を非表示または表示するだけです。

解決策の1つは、選択されているボタンに応じてスペイン語/英語のnav要素を表示/非表示にすることです。このように：

$(document).ready(function() { 
 

 
    $(".burger-nav").on("click", function() { 
 
    $("nav ul").toggleClass("open"); 
 
    }); 
 

 
    $(".spanish").on("click", function() { 
 
    $(".englishNav").hide(); 
 
    $(".spanishNav").show(); 
 
    }); 
 

 
    $(".english").on("click", function() { 
 
    $(".englishNav").show(); 
 
    $(".spanishNav").hide(); 
 
    }); 
 

 
});

.spanishNav { 
 
    display: none; 
 
} 
 

 
.spanish { 
 
    cursor: pointer; 
 
} 
 

 
.english { 
 
    cursor: pointer; 
 
} 
 

 
nav { 
 
    float: right; 
 
    padding-right: 10% 
 
} 
 

 
nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    margin-left: 35px; 
 
    padding-top: 25px; 
 
    position: relative; 
 
} 
 

 
nav a { 
 
    color: #444; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
} 
 

 
.burger-nav { 
 
    display: block; 
 
    height: 40px; 
 
    width: 40px; 
 
    float: right; 
 
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"); 
 
    background-size: cover; 
 
    cursor: pointer; 
 
} 
 

 
.wrapper { 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 

 
nav ul { 
 
    overflow: hidden; 
 
    background: white; 
 
    height: 0; 
 
} 
 

 
nav ul.open { 
 
    height: auto; 
 
    margin-top: 150px; 
 
    margin-right: 100px; 
 
} 
 

 
nav ul li { 
 
    float: none; 
 
    text-align: left; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
nav ul li a { 
 
    color: black; 
 
    padding: 10px; 
 
    border-bottom: 1px solid #404040; 
 
    display: block; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <nav> 
 
    <a class="burger-nav"></a> 
 
    <ul class="englishNav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    <ul class="spanishNav"> 
 
     <li><a href="#">Homeo</a></li> 
 
     <li><a href="#">Abouto</a></li> 
 
     <li><a href="#">Serviceso</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    <p class="spanish"> 
 
     spanish 
 
    </p> 
 
    <p class="english"> 
 
     english 
 
    </p> 
 
    </nav> 
 
</div>

Answer 2

あなたはドット を忘れてしまっただけで、現在の出力＆期待されているものを出力するものである.spanish