Question

我试图在侧边栏url中为社交创建这种类型的子菜单。社交子菜单的选项是：fb，twitter，youtube。

我的HTML：

<ul class="sidebar-nav" id="sidebar">
        <li class="sub-sidebar-brand"><a href="#/abc">abc<span
                class="sub_icon fa fa-upload"></span></a></li>
        <li class="sub-sidebar-brand"><a href="#/System">System<span
                class="sub_icon fa fa-hdd-o"></span>
        </a></li>
        <li class="sub-sidebar-brand"><a href="#/web">Web<span
                class="sub_icon fa fa-hdd-o"></span></a></li>
        <li class="sub-sidebar-brand"><a href="#/social">Social<span
                class="sub_icon fa fa-hdd-o"></span></a></li>
    </ul>

在这里，我尝试为social.social创建子菜单应该是一个包含3个选项的下拉列表。在社交下拉列表中单击一个选项，应该重定向到其他页面。

我怎么能在这做到这一点？任何人都可以帮我解决这个问题。

Answer 1

试试这种方式

＆＃13;

$('.sidebar-nav li a').click(function(){
  $(this).parent().toggleClass('active')
})

＆＃13;

.sidebar-nav{list-style:none; width:200px;}
.sub-menu{padding:0; display:none; list-style:none;}
.sidebar-nav li.active ul{display:block;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-nav" id="sidebar">
        <li class="sub-sidebar-brand"><a href="#/abc">abc<span
                class="sub_icon fa fa-upload"></span></a></li>
        <li class="sub-sidebar-brand"><a href="#/System">System<span
                class="sub_icon fa fa-hdd-o"></span>
        </a>
          <ul class="sub-menu">
        <li class="sub-sidebar-brand"><a href="#/web">Web<span
                class="sub_icon fa fa-hdd-o"></span></a></li>
        <li class="sub-sidebar-brand"><a href="#/social">Social<span
                class="sub_icon fa fa-hdd-o"></span></a></li>
            </ul>
  </li>
<li class="sub-sidebar-brand"><a href="#/abc">abc<span
                class="sub_icon fa fa-upload"></span></a></li>
    </ul>

＆＃13;

Answer 2

这是适用于React的解决方案

用图像替换材质图标

import React, { useState } from "react";
import styled from "@emotion/styled";
import { useHistory } from "react-router-dom";
import { css } from "@emotion/core";
import Icon from "@material-ui/core/Icon";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";

const MenuItem = (props) => {
  const {
    page,
    isSubMenu = false,
    onClick,
    isActive = false,
    showArrow,
  } = props;



const { name, icon } = page;

  return (
    <MenuItem.Wrapper
      isActive={isActive}
      isSubMenu={isSubMenu}
      onClick={() => onClick(page)}
    >
      <Icon>{icon}</Icon>
      <div className="d-flex justify-content-between w-100">
        <span className="name-holder">{name}</span>
        {showArrow && <KeyboardArrowDownIcon />}
      </div>
    </MenuItem.Wrapper>
  );
};

MenuItem.Wrapper = styled.span`
  font-size: 14px;
  display: flex;
  align-items: center;
  color: white;
  margin-bottom: 13px;
  border-radius: 0 24px 24px 0;
  padding: 11px 20px;
  .name-holder {
    margin-left: 2rem;
  }
  .show-arrow {
    display: none;
  }
  &:hover {
    background-color: #f7c948;
    cursor: pointer;
  }

  ${(props) =>
    props.isSubMenu &&
    css`
      padding-left: 20px;
    `}

  ${(props) =>
    props.isActive &&
    css`
      background-color: #f7c948;
      cursor: pointer;
    `}
`;

const SubMenu = (props) => {
  const [visible, setVisible] = useState(false);
  const { icon, name, pages, onSubMenuClick } = props;

  const itemPage = {
    name,
    icon,
    link: "",
  };

  const currentLocation = window.location.pathname;

  console.log("currentLocation:", currentLocation);

  return (
    <React.Fragment>
      <MenuItem
        page={itemPage}
        showArrow
        onClick={() => setVisible(!visible)}
      />

      <SubMenu.Wrapper visible={visible}>
        {pages.map((page, index) => (
          <MenuItem
            isActive={currentLocation === page.link}
            key={index}
            isSubMenu
            page={page}
            onClick={onSubMenuClick}
          />
        ))}
      </SubMenu.Wrapper>
    </React.Fragment>
  );
};

SubMenu.Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  ${(props) =>
    props.visible &&
    css`
      max-height: 500px;
      transition: max-height 0.25s ease-in;
    `}
`;

const SideBarHandler = (props) => {
  const { pages } = props;
  const history = useHistory();
  const currentLocation = window.location.pathname;
  const menuItemClickHandler = (page) => history.push(page.link);

  return (
    <div>
      <div className="items">
        {pages.map((page, index) => {
          const { name, icon, submenu } = page;

          return submenu === undefined ? (
            <MenuItem
              isActive={currentLocation.includes(page.link)}
              page={page}
              key={index}
              onClick={menuItemClickHandler}
            />
          ) : (
            <SubMenu
              onSubMenuClick={menuItemClickHandler}
              key={page.name}
              name={name}
              icon={icon}
              pages={submenu}
            />
          );
        })}
      </div>
    </div>
  );
};

export default SideBarHandler;

如何在侧边栏中创建子菜单

2 个答案: