是否有一个 jQuery 函数可以让我显示和隐藏特定的 div？

Posted 2023-05-08

【中文标题】是否有一个 jQuery 函数可以让我显示和隐藏特定的 div？

【英文标题】：Is there a jQuery function that allowes me to show and hide specific div's?

【发布时间】：2019-12-22 03:26:26

【问题描述】：

我有一个带有 4 个按钮的菜单（每个按钮都指向一个子菜单）。每个菜单都是一个特定的 div，带有一个 id。在.show, .hide 的帮助下，每次有人单击菜单项时，都会显示子菜单并隐藏主菜单。每次显示子菜单时，还有一个“返回”按钮，它必须隐藏显示的子菜单，并再次显示主菜单，等等

我已经在所有按钮和 div 上尝试了 jQuery 单击、显示和隐藏功能。但是找不到允许我为多个 div 做同样事情的简短/干净的函数

这是我已经尝试过的一些简单的 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 设置一个函数。

【问题讨论】：

您可以向 html 添加数据属性以指示此特定按钮指向和返回的位置（在这种情况下为 2 个数据属性），然后只需更新您的函数以使用这些数据属性值，以便该函数可以与您的任何 div 一起使用。有很多方法可以做到这一点，具体取决于您的 html 是结构化的

因此，我可以在数据属性上使用 .show，而不是在 id 上使用 .show。并在活动数据属性 div 上使用 .hide？​​span>

是的，这只是一种方法，您还可以在每个级别上都有课程，以便在打开和关闭时可以定位课程。由于您将在点击时进行操作，因此您将知道点击了什么，并且您可以让父元素在需要时执行某些操作

您发布了所有不必要的代码并遗漏了所需的代码（标题）。我看不到按钮的 html 以便复制和粘贴它给你一个答案。你能显示标题吗？

我的建议是创建一个函数并将其与 onClick="function(event)" 一起使用并传递事件，您将使用该事件来确定单击了哪个按钮，然后进行相应的切换。这不需要额外的属性即可工作。

【参考方案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>

【讨论】：

这是我想要的预期结果。我只是不确定它是否 100% 正确：pastebin.com/17xJa9un

不，它不起作用，因为检查对象类部分是错误的。如果你想问一个不同的问题，然后发布一个不同的问题。如果这个问题不再相关并且我的回答对您没有帮助，那么您可以删除这个问题并提出不同的问题