ドロップダウンメニューを一度閉じると、ページが選択されます

Question

私はいくつかのページのドロップダウンメニューを持っています。私はそれを取得しようとしているので、ページをクリックするとメニュードロップダウンメニューが閉じます。今すぐドロップダウンメニューが表示されたままになります。たとえば、「ヘア」を選択すると、開いたままではなくメニューが閉じます。

また、この質問とは別に、誰かが解決策を持っていれば、本当に感謝しています。ドロップダウンメニューには、すべてのページが現在選択されている場合は、すべてのページが2回表示されます。選択されている場合は一度だけ表示する方法はありますか？

jsfiddle - https://jsfiddle.net/z7dg5e0n/1/

jQuery(".shop-beauty-span").html("All"); 
 
jQuery("#ShopBeautyPage1").show(); 
 

 
jQuery(".shop-beauty-li").on('click', function() { 
 
    var value = jQuery(this).val(); 
 
    if (value) { 
 
    jQuery(".shopbeautypage").hide(); 
 
    jQuery("#ShopBeautyPage" + value).show(); 
 
    jQuery(".shop-beauty-span").html($(this).text()); 
 
    } 
 
});

.shop-beauty-ul{ 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #fff; 
 
    position: absolute; 
 
width:100%; 
 
    text-align:center; 
 
    min-width:200px; 
 
} 
 

 
.shopbeautypage{ 
 
    display:none; 
 
} 
 

 
#shop-beauty-drop:hover > ul{ 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 
#shop-beauty-drop:hover { 
 
    cursor: pointer; 
 
} 
 

 
#shop-beauty-drop{ 
 
    background-color: #fff; 
 
    width: 22%; 
 
    text-align:center; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    min-width:200px; 
 
     text-transform: uppercase; 
 
    font-size: 15px; 
 
    font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    font-weight: normal; 
 
    -webkit-font-smoothing: antialiased; 
 
    padding-top: 10px; 
 
    margin-bottom: 200px; 
 
} 
 

 
.shop-beauty-li{ 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
.shop-beauty-li:hover{ 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="shop-beauty-drop"> 
 
    <span class="shop-beauty-span"></span> 
 
    <ul class="shop-beauty-ul"> 
 
    <li class="shop-beauty-li" value="1">All</li> 
 
    <li class="shop-beauty-li" value="2">Hair</li> 
 
    <li class="shop-beauty-li" value="3">Makeup</li> 
 
    <li class="shop-beauty-li" value="4">Skin</li> 
 
    <li class="shop-beauty-li" value="5">Under $100</li> 
 
    </ul> 
 
</div> 
 

 
<div id="ShopBeautyPage1" class="shopbeautypage" style=""> 
 
    Content of page 1 
 
</div> 
 
<div id="ShopBeautyPage2" class="shopbeautypage" style="display:none"> 
 
    Content of page 2 
 
</div> 
 
<div id="ShopBeautyPage3" class="shopbeautypage" style="display:none"> 
 
    Content of page 3 
 
</div> 
 
<div id="ShopBeautyPage4" class="shopbeautypage" style="display:none"> 
 
    Content of page 4 
 
</div> 
 
<div id="ShopBeautyPage5" class="shopbeautypage" style="display:none"> 
 
    Content of page 5 
 
</div>

Answer 1

代わりのCSS :hoverを使用して、あなたがjQueryを使ってすべてを行うことができます。

私はこのようにコードを変更しました。ここで

function open() { jQuery(this).toggleClass('open', true); } 
 
function close() { jQuery(this).toggleClass('open', false); } 
 
jQuery("#shop-beauty-drop").hover(open, close); 
 

 
jQuery(".shop-beauty-span").html("All"); 
 
jQuery("#ShopBeautyPage1").show(); 
 

 
jQuery(".shop-beauty-li").on('click', function() { 
 
    var value = jQuery(this).val(); 
 

 
    // The second part of your question 
 
    jQuery(this).addClass('active').siblings().removeClass('active'); 
 
    
 
    if (value) { 
 
    jQuery(".shopbeautypage").hide(); 
 
    jQuery("#ShopBeautyPage" + value).show(); 
 
    jQuery(".shop-beauty-span").html($(this).text()); 
 
    } 
 
    
 
\t jQuery("#shop-beauty-drop").trigger("mouseout"); 
 
});

.shop-beauty-ul { 
 
    display: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #fff; 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
    min-width: 200px; 
 
} 
 

 
.shopbeautypage { 
 
    display: none; 
 
} 
 

 
#shop-beauty-drop.open > ul { 
 
    display: block; 
 
    cursor: pointer; 
 
} 
 

 
#shop-beauty-drop:hover { 
 
    cursor: pointer; 
 
} 
 

 
#shop-beauty-drop { 
 
    background-color: #fff; 
 
    width: 22%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    min-width: 200px; 
 
    text-transform: uppercase; 
 
    font-size: 15px; 
 
    font-family: 'textaw00-heavyregular', 'AvenirNextLTW01', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    font-weight: normal; 
 
    -webkit-font-smoothing: antialiased; 
 
    padding-top: 10px; 
 
    margin-bottom: 200px; 
 
} 
 

 
.shop-beauty-li { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
/* the second part of your question */ 
 
.shop-beauty-li.active { display: none; } 
 

 
.shop-beauty-li:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="shop-beauty-drop"> 
 
    <span class="shop-beauty-span"></span> 
 
    <ul class="shop-beauty-ul"> 
 
    <li class="shop-beauty-li active" value="1">All</li> 
 
    <li class="shop-beauty-li" value="2">Hair</li> 
 
    <li class="shop-beauty-li" value="3">Makeup</li> 
 
    <li class="shop-beauty-li" value="4">Skin</li> 
 
    <li class="shop-beauty-li" value="5">Under $100</li> 
 
    </ul> 
 
</div> 
 

 
<div id="ShopBeautyPage1" class="shopbeautypage" style=""> 
 
    Content of page 1 
 
</div> 
 
<div id="ShopBeautyPage2" class="shopbeautypage" style="display:none"> 
 
    Content of page 2 
 
</div> 
 
<div id="ShopBeautyPage3" class="shopbeautypage" style="display:none"> 
 
    Content of page 3 
 
</div> 
 
<div id="ShopBeautyPage4" class="shopbeautypage" style="display:none"> 
 
    Content of page 4 
 
</div> 
 
<div id="ShopBeautyPage5" class="shopbeautypage" style="display:none"> 
 
    Content of page 5 
 
</div>

またあなたのフィドルのフォークです：

https://jsfiddle.net/ahmadm/eL4j33ct/

編集あなたの質問の後半部分も解消されます。

希望します。