Question

我有一个带有4个按钮的菜单（每个按钮均指向一个子菜单）。每个菜单都是一个特定的div，带有ID。每当有人单击菜单项时，都会在.show, .hide的帮助下显示子菜单并隐藏主菜单。每次显示子菜单时，都会有一个“返回”按钮，该按钮必须隐藏显示的子菜单，然后再次显示主菜单，依此类推。

我已经尝试了jQuery在所有按钮和div上的单击，显示和隐藏功能。但是找不到允许我对多个div进行相同操作的short / clean函数

这是我已经尝试过的一些简单的jQuery代码：

{% extends "base.twig" %}

{% block header %}{% endblock %} 

{% block content %}
    <div class="screen">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6 col-sm-6 col-6 bg-blue">
                    <a href="{{site_url}}/tablet-menu"><img class="logo" src="{{assets}}/img/logo.png"></a>
                </div>
                <div class="col-md-6 col-sm-6 col-6 bg-yellow">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-4">
                            <img class="flag" src="{{assets}}/img/nl.svg">
                        </div>
                        <div class="col-md-4 col-sm-4 col-4">
                            <img class="flag" src="{{assets}}/img/gb.svg">
                        </div>
                        <div class="col-md-4 col-sm-4 col-4">
                            <img class="flag" src="{{assets}}/img/de.svg">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-4">
                            <img class="flag" src="{{assets}}/img/fr.svg">
                        </div>
                        <div class="col-md-4 col-sm-4 col-4">
                            <img class="flag" src="{{assets}}/img/it.svg">
                        </div>
                        <div class="col-md-4 col-sm-4 col-4">
                            <img class="flag" src="{{assets}}/img/ru.svg">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid" id="menu">
            <div class="row">
                <div class="col-md-2 col-sm-2 col-2 offset-md-5 offset-sm-5 offset-5">
                    <div id="weed-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Wiet</p>
                    </div>
                </div>
            </div>
            <div class="row justify-content-md-center">
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="indica-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Indica</p>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="sativa-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Sativa</p>
                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-2">
                    <div id="hybrid-tab">
                        <a href="#"><img class="menu-btn" src="{{assets}}/img/menu-button-weed.png"></a>
                        <p class="menu-name">Hybrid</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid" id="weed-menu">
            <div class="row">
                <div class="col-md-2 offset-md-5">
                    <div class="back-btn">
                        <img class="menu-btn" src="{{assets}}/img/menu-button-weed.png">
                    </div>
                </div>
            </div>
        </div>

    </div>`
    <script>
        $('#weed-tab').click(function(){
            $('#menu').hide();
            $('#weed-menu').show();
            $('.back-btn').show();
        });

        $('.back-btn').click(function(){
            $('#menu').show();
            $('#weed-menu').hide();
        });
    </script>
{% endblock %}

我希望有一个功能，该功能使我可以显示和隐藏这些菜单，包括返回主菜单，而不必像上面的示例那样为每个div都具有一个功能。

Answer 1

我已经简化了您的代码，使其更容易显示

由于触发器上的ID与您的子菜单相匹配，因此我已使用它们来定位内容。您将把代码放在doc中。

$( "#" + this.id.replace("-tab", "-menu") )，此行仅使用单击的ID，并将-tab替换为-menu。这样做是为了使用您当前的html

var $menu = $('#menu');
var $subMenu = $('.sub-menu');

$('.menu-item').on("click", function() {
  $menu.hide();

  $( "#" + this.id.replace("-tab", "-menu") ).show();
});

$('.back-btn').on( "click", function() {
  // hide all sub-menu, no need to be specific
  $subMenu.hide();

  $menu.show();      
});

.sub-menu {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="menu">

  <div id="weed-tab" class="menu-item">
    <p class="menu-name">Wiet</p>
  </div>
  <div id="indica-tab" class="menu-item">
    <p class="menu-name">Indica</p>
  </div>
</div>

<div class="container-fluid sub-menu" id="weed-menu">weed
  <div class="back-btn">
    back
  </div>
</div>

<div class="container-fluid sub-menu" id="indica-menu">indica
  <div class="back-btn">
    back
  </div>
</div>

有没有jQuery函数可以让我显示和隐藏特定的div？

1 个答案: