javascript - Jquery 多个 div 切换

Question

好的。很快就会发现我正在学习 jQuery，并且可能已经以最笨拙的方式解决了这个问题。这就是我来这里的原因。

我一直在创建一个基于“面板”的菜单系统，它提供了许多不同的功能(菜单、过滤器、搜索、购物篮和帐户)。我有 99% 我想去的地方。实际上，如果您单击菜单图标(作为示例)，您将看到确切的效果。再次点击它，一切就完美了。

当用户在初始“面板”打开的情况下单击另一个图标时，我的问题就来了。现在您可以看到我的知识差距了。

请注意，效果是在面板的不同 div 上，每次都在同一个 div 上(主要)。自然最好是: a) 在不关闭面板的情况下单击新图标时，jQuery 会关闭前一个面板，删除 close-btn，向后滑动主面板，然后打开并触发新面板。 要么 b) 它关闭前一个面板，删除 close-btn 但保持主面板打开(我认为这太复杂了)。

HTML

<div id="mainpanel">
<div class="menunav">
    <div class="toggle menu-btn"></div>
    <div class="toggle filter-btn"></div>
    <div class="toggle search-btn"></div>
    <div class="toggle basket-btn"></div>
    <div class="toggle account-btn"></div>
</div>
</div>
<div class="togglepanel mainmenu">
menu here
</div>
<div class="togglepanel filter">
filter here
</div>
<div class="togglepanel search">
search here
</div>
<div class="togglepanel basket">
basket here
</div>
<div class="togglepanel account">
account here
</div>
<main>
content will be here
</main>

CSS

#mainpanel {
position: fixed;
display: table;
top: 0;
left: 0;
width: 125px;
height: 100%;
background: #206ba4;
vertical-align: middle;
z-index: 9999;}

main {
position: relative;
top: 0;
margin-left: 125px;
transform: translateX(0);
transform: translateY(0);
transition: transform .5s;}

.move {
transform: translateX(300px) !important;}

.menunav {
display: table-cell;
color: #fff;
z-index: 1001;
margin: 20px 0 0;
text-align: center;
vertical-align: middle;}

.menunav div {
display: block;
width: 100%;
margin: 0 0 30px;
text-align: center;}

.menu-btn:after, .filter-btn:after, .search-btn:after, .basket-btn:after, .account-btn:after, .close-btn:after {
font-family: FontAwesome;
content: "menu";
font-size: 1.8em;
font-weight: 200;
color: #fff;
display: block;
height: 1em;
width: 1em;
margin: 0 0 0 30%;
cursor: pointer;}

.filter-btn:after {
content: "filter";}

.search-btn:after {
content: "search";}

.basket-btn:after {
content: "basket";}

.account-btn:after {
content: "account";}

.close-btn:after {
content: "close";}

.mainmenu, .filter, .search, .basket, .account {
position: fixed;
width: 300px;
top: 0;
left: 125px;
height: 100%;
background: #54a4de;
transform: translateX(-100%);
transition: transform .5s;
z-index: -1;}

.expand {
transform: translateX(0px);}

jQuery

jQuery(function($){
    $('.menu-btn').click(function(){
    $('.mainmenu').toggleClass('expand')
    $('main').toggleClass('move')
    $('.menu-btn').toggleClass('close-btn')
     })
})
jQuery(function($){
    $( '.filter-btn' ).click(function(){
    $('.filter').toggleClass('expand')
    $('main').toggleClass('move')
    $('.filter-btn').toggleClass('close-btn')
     })
})
jQuery(function($){
    $( '.search-btn' ).click(function(){
    $('.search').toggleClass('expand')
    $('main').toggleClass('move')
    $('.search-btn').toggleClass('close-btn')
 })
})  
jQuery(function($){
    $( '.basket-btn' ).click(function(){
    $('.basket').toggleClass('expand')
    $('main').toggleClass('move')
    $('.basket-btn').toggleClass('close-btn')
     })
})  
jQuery(function($){
    $( '.account-btn' ).click(function(){
    $('.account').toggleClass('expand')
    $('main').toggleClass('move')
    $('.account-btn').toggleClass('close-btn')
     })
})

Here is the jsfiddle

非常感谢任何指点....我的头很痛!

Answer 1

DEMO HERE

您的尝试中有许多多余的代码，但仍然是实现此目标的良好尝试。因此，以下是我实现这一目标的建议。

提示:

• Do not include multiple jQuery(function as this is equivalent to $(document).ready function and its good if you have only one per js file

• Write a single common event to all the buttons and differentiate based on $(this) for each click that happens

• Add an extra data-* attribute to your .toggle element, say here data-target, to target its corresponding panel-body

下面是我对您的代码所做的一些更改..

HTML

<div class="menunav">
    <!--data-target to each of its corresponding body class-->
    <div class="toggle menu-btn" data-target=".mainmenu"></div>
    <div class="toggle filter-btn" data-target=".filter"></div>
    <div class="toggle search-btn" data-target=".search"></div>
    <div class="toggle basket-btn" data-target=".basket"></div>
    <div class="toggle account-btn" data-target=".account"></div>
</div>

JS

jQuery(function($){
    //click event to one common class i.e toggle
    $('.toggle').click(function(){
        var target=$(this).data('target'); //get the clicked element's target property
        $('.togglepanel').not($(target)).removeClass('expand');
        //remove class from all the togglepanel elements except the current element's target
        $('.toggle').removeClass('close-btn');
        //general action in any scenario to remove close-btn
        if($(target).hasClass('expand'))
        {
            //if target has expand class then remove it and do necessary changes
            $(target).removeClass('expand')
            $('main').removeClass('move')
            $(this).removeClass('close-btn')
        }
        else
        {
            //else add necessary classes
            $(target).addClass('expand')
            $('main').addClass('move')
            $(this).addClass('close-btn')
        }
     })
})