繁体   English   中英

当我在 list.map() 中创建侧边栏下拉菜单时,它不会停止

Sidebar-dropdown menu doesn't whork when I create it inside the list.map()

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

当我在 list.map() 方法中创建它时,我的侧边栏下拉菜单没有打开,当它在此方法之外创建时,它可以正常工作。

下面的代码显示了通过 list.map 生成我的侧边栏下拉菜单的 jsx,并且单击不起作用:

 const listMenu = this.state.bestiaryList.map((bestiary) => (
      <li key={bestiary.id} className="sidebar-dropdown">
        <a href="#">
          <span>{bestiary.name}</span>
        </a>
        <div className="sidebar-submenu">
          <ul>
            <li>
              <a href="#">Dashboard 2</a>
            </li>
          </ul>
        </div>
      </li>
    ));  

下面的代码显示了 jquery 函数,该函数使单击在 list.map 之外创建的菜单上工作:

jQuery(function ($) {
    $(".sidebar-dropdown > a").click(function () {
      $(".sidebar-submenu").slideUp(200);      
      if (
        $(this)
          .parent()
          .hasClass("active")
      ) {
        $(".sidebar-dropdown").removeClass("active");
        $(this)
          .parent()
          .removeClass("active");
      } else {
        $(".sidebar-dropdown").removeClass("active");
        $(this)
          .next(".sidebar-submenu")
          .slideDown(200);
        $(this)
          .parent()
          .addClass("active");
      }
    });

    $("#close-sidebar").click(function () {
      $(".page-wrapper").removeClass("toggled");
    });
    $("#show-sidebar").click(function () {
      $(".page-wrapper").addClass("toggled");
    });
  });

最后,在 list.map 之外创建的菜单正常工作:

<li className="sidebar-dropdown">
                    <a href="#">
                      <i className="fa fa-tachometer-alt" />
                      <span>Dashboard</span>
                      <span className="badge badge-pill badge-warning">New</span>
                    </a>
                    <div className="sidebar-submenu">
                      <ul>
                        <li>                          
                          <a href="#">Dashboard 1                            
                          </a>
                        </li>
                        <li>
                          <a href="#">Dashboard 2</a>
                        </li>
                        <li>
                          <a href="#">Dashboard 3</a>
                        </li>
                      </ul>
                    </div>
                  </li>

如果有人可以帮助我,我将不胜感激。

问题暂未有回复.您可以查看右边的相关问题.
1 使用目标链接创建侧边栏下拉菜单时出现问题

我正在尝试创建一个管理侧边栏菜单。产品下有子菜单,我正在通过jQuery切换。 但是子菜单href =“url”不起作用。当我点击产品 - 它打开子菜单时,如果我点击子菜单的任何项目,那么关闭切换而不转到目标页面。 你能告诉我我的代码有什么问题吗?我该如何解决? })(jQuery) ...

2 创建弹出/侧边栏菜单时出现问题

请给我一些CSS和语法帮助。 热情欢迎您的帮助。 我想插入一个包含一些Skypelinks的列表,当我将鼠标移到图像上时,其行为类似于侧边栏菜单。 这是我尝试操作的html代码: 通过将鼠标移到图像上,图像标题为Skypename,两个链接应淡出右侧(float:right ; ...

5 当我调用一个侧边栏时,会出现多个侧边栏。 怎么修?

我有一个functions.php文件,我在其中注册了所有侧边栏。 在sidebar.php文件中,我有这个 那我叫它 博客页面侧栏也出现了。 该怎么办? 编辑:等等,我需要为所有侧边栏创建一个页面吗? 这就是为什么它不起作用吗? 那将是很多页面,还有其他解 ...

6 侧边栏中的下拉菜单

我正在尝试借助w3schools.com示例在边栏中创建一个下拉列表。 由于某种原因,我的代码在codepen.io和stackoverflow上都可以正常工作,但是一旦在Chrome浏览器上运行它,下拉菜单就不会弹出。 有什么我能做的吗? 我已经清除了浏览历史记录和缓存,但没有任何解决方 ...

7 侧边栏中的下拉菜单

这让我难过。 在它工作之前,我已经做过,但现在不行了。 导航栏后面的浅色背景也应该在页面主体后面。 页脚不应在其中。 页面上将有更多内容,但标题为“欢迎使用The Herb Place”时,其浅色背景应与导航栏相同。 即使我在html中写了&lt;div id="content-s ...

2015-03-28 12:47:03 0 392   html/ css
8 使我的侧边栏下拉菜单

我很难找到一个可以用来使侧边栏作为动画下拉的插件。 它已经可以使用了,但是可以锦上添花(Kingdom Hearts粉丝)。 这是用于制作侧边栏的CSS,JS和HTML。 我仍在学习JS,因此,如果有人可以帮助我弄清楚,那就太好了! *注意:其中包含BoM的所有内容都与我项目中的另 ...

9 下拉菜单(侧边栏)

我整理了以下代码,从SQL数据库加载标记数据,该数据正确显示了所持有的所有信息。 现在,我想包含一个下拉菜单,该菜单按标记的“位置名称”显示标记,并且当用户选择位置时,相关标记会反弹。 从一些信息中我知道我发现这是一个侧边栏? 也许有人可以向我指出正确的方向,说明我将如何修改我的代码以 ...

10 隐藏侧边栏和下拉菜单

当您在每个“ divs”外部单击时,我想隐藏下拉菜单和侧边栏。 我添加了@media规则,并且每个div都有一个按钮,它将显示和隐藏每个div。 我使用JavaScript来隐藏和显示两个div。 现在的问题是,当浏览器的分辨率最低高度为992px时,当我单击侧栏将显示的滑动切换按钮时,侧 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM