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

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

 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>

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

  ask by Armando Neto translate from so

本文未有回复,本站智能推荐:

1回复

ReactJSfor渲染内部循环

我是React JS的新手,我不确定如何执行for循环以呈现可变次数的内容。 这是我的代码: 它生成一个产品项目网格,每行4个项目。 我需要在最后一行的末尾添加空div,以使每行中的div数量相同。 因此,如果this.props.products.length == 7我需要1个
1回复

下拉列表未显示reactjsx中的选项

我正在使用带有语义UI的React。 在语义UI中,我们需要Javascript才能创建下拉列表。 我不确定将JS代码放在哪里。 我试图通过以下答案来放入js文件: 未定义React中的jQuery 。 但它抛出一个错误。 HTML: 使用Javascript: 我需要包
1回复

刷新时滚动到页面顶部

我正在尝试为某些元素在ecmascript-6 react应用程序中滚动到某个位置时创建一些动画。 我尝试使用多个react滚动包,但未获得所需的结果,因为我想将动画应用于从同一父组件映射到的所有子组件(因此,所有子组件会在第一个子组件滚动到位)。 要解决此问题,我考虑仅获取每个组件的当前
1回复

单击侧边栏时未调用onClick

在我的主容器中,布局具有此代码 每当我单击侧栏中的任何元素时,我都希望进行控制台日志测试 出于某种原因,这种情况不会发生,但是如果我将onClick方法移至标题(例如)或主标题,则可以正常工作 这是我的侧边栏: 这是我的导航项: 有任何想法吗? 谢谢
1回复

React路由器侧边栏正确路由,但未在顶部菜单下显示组件

我在 React 中设计了一个带有侧边栏和顶部菜单的管理面板。 当您单击侧边栏上的任何链接时,需要在顶部菜单下显示一个组件。 但是,即使路由器链接工作正常(当我单独加载路由器链接时,它们会更改 URL 并显示单个组件),当我单击侧边栏链接时,它们在顶部菜单下和侧边栏旁边没有显示任何内容. 似乎是什么
1回复

如何为侧边栏中的每个部分制作不同的应用栏?[ReactJs]

我正在使用material-ui(@ material-ui / core)作为响应式抽屉和AppBar。 我想为抽屉的每个部分都有特定的AppBar。 例如,当我单击“时间表”部分时,AppBar标签必须更改为“时间表”并在其上显示其他内容,依此类推。 怎么做以及最好的方法是什么?
1回复

在ReactJSjsx中使用map时,为什么会出现未捕获的类型错误?

我正在创建一个组件,用于根据课程对象中的可用选项选择输入。 我目前正在收到此错误: Uncaught TypeError: Cannot read property 'map' of undefined 这是我的代码: 有人知道原因吗?
2回复

使用反应路由器通过侧边栏导航动态渲染组件的更简单方法

目前正在通过本教程创建一个带有反应路由器的侧边栏导航系统https://reacttraining.com/react-router/web/example/sidebar 我计划有多条路线,所以这意味着我必须继续导入路线并将它们添加到routes数组中。 是否有一种智能/正确的方法来动态加载它们?