jQuery多个div的切换

Question

好的。很快就会有人意识到，我正在学习jQuery，可能选择了最笨拙的方式。但这也是我来这里的原因。

我正在创建一个“面板”式菜单系统，提供多种不同功能（菜单、筛选、搜索、购物篮和账户）。我已经完成了99%的工作。如果您点击菜单图标（以此为例），您将看到确切的效果。再次点击它，一切都完美无缺。

当用户在其初始“面板”打开的情况下点击另一个图标时，我的问题出现了。现在你可以看到我知识上的漏洞。

请注意，该效果适用于面板上的不同div，在每个div上是相同的（主要的）。自然而然，最好的解决方案是： a）当点击新图标而不关闭面板时，jQuery关闭先前的面板，移除关闭按钮，滑动回主面板，然后打开新面板。 b）关闭先前的面板，删除关闭按钮，但保持主面板开启（我认为这样过于复杂）。

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')
     })
})

这里是 jsfiddle

非常感谢您提供的任何指导......我的头很痛！

- Justin Thomas

Answer 1

点此查看演示

您的尝试中存在许多冗余的代码，但仍是一个很好的尝试。因此，以下是我建议实现此目的的方法。

提示：

• 不要包含多个jQuery(function，因为这相当于$(document).ready函数，如果每个js文件只有一个，那就很好了

• 编写一个通用事件来处理所有按钮，并根据$(this)区分每次单击

• 在您的.toggle元素上添加额外的data-*属性，例如这里的data-target，以针对其相应的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')
        }
     })
})

- Guruprasad J Rao

---

你是多么美妙的人啊 ;) 非常感谢你。我去吃午餐，回来后发现你已经为我的星期一带来了惊喜。我希望你意识到这意味着什么 :) - Justin Thomas

哦，还有，“谢谢”你对批评的温和态度 :) - Justin Thomas

我明白了，随时可以帮忙编码。 :) 如果我的回答有帮助到您，您可以点赞并接受它。 ;) - Guruprasad J Rao

Answer 2

jQuery(function($){
        $(document).on('click', '.toggle', function (){
            
            // to close all open contents
            $('.togglepanel').removeClass('expand');
            $('main').removeClass('move');
            
           var target = $(this).data("target");
            
            if( $(this).hasClass('close-btn') ){
              $('.toggle').toggleClass('close-btn', false);
               $('main').toggleClass('move', false)
               $(target).toggleClass('expand', false);
            }else{
              $('.toggle').toggleClass('close-btn', false);
              $(this).toggleClass('close-btn', true);
              $('main').toggleClass('move', true)
               $(target).toggleClass('expand', true);
            }
            
        });
    
 })

#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";
}
}

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

.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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainpanel">
    <div class="menunav">
        <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>
</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>

实际上，您正在编写大量可转换为单行的代码。尝试使用以下内容而不是在每个按钮上添加click事件：

首先，将data-target属性添加到您的按钮中，例如：

<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>

在您的jQuery中：

jQuery(function($){
    $(document).on('click', '.toggle', function (){

        // to close all open contents
        $('.togglepanel').removeClass('expand');
        $('main').removeClass('move');

       var target = $(this).data("target");

        if( $(this).hasClass('close-btn') ){
           $('.toggle').toggleClass('close-btn', false);
           $('main').toggleClass('move', false)
           $(target).toggleClass('expand', false);
        }else{
           $('.toggle').toggleClass('close-btn', false);
           $(this).toggleClass('close-btn', true);
           $('main').toggleClass('move', true)
           $(target).toggleClass('expand', true);
        }

    });
});

- Dexter Bengil