如何制作一些特定细节的下拉菜单

时间：2019-06-17 01:52:57

标签： javascript html css

我想使用一些详细信息进行高级下拉菜单。

这都是关于javascript的内容，只是js，没有框架

我在这里有两个下拉菜单，一个是“服务”，另一个是“项目”。这里的问题是我想要当我单击“服务”显示中的子菜单时，当我单击“项目”显示中的子菜单时，在“服务”显示中的子菜单隐藏，而当我在两个外部单击时，子菜单也都隐藏。我尝试了一些代码，但是没有按预期工作。谢谢你们！

<nav>
    <h1 class="logo">Hiep</h1>
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Serices</a>
            <ul class="sub-menu">
                <li><a href="#">Service 1</a></li>
                <li><a href="#">Service 2</a></li>
                <li><a href="#">Service 3</a></li>
                <li><a href="#">Service 4</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
        <li>
            <a href="#">Projects</a>
            <ul class="sub-menu">
                <li><a href="#">Project 1</a></li>
                <li><a href="#">Project 2</a></li>
                <li><a href="#">Project 3</a></li>
                <li><a href="#">Project 4</a></li>
            </ul>
        </li>
    </ul>
</nav>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #fff;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: #000;
}

h1 {
    color: #fff;
    text-transform: uppercase;
}
.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu li {
    position: relative;
}

.menu a {
    padding: 25px;
    display: block;
    }
    .menu a:hover {
        background: #fff;
        color: #333;
    }

.menu .sub-menu {
    position: absolute;
    top: 100%;
    background: #000;
    width: 130%;
    left: 0;
    display: none;
}

演示：https://jsfiddle.net/zoamkdru/4/

3 个答案:

答案 0 :(得分：0)

仅Hhtml和CSS和Pure Javascript ...我急着这样做。可能还有许多其他方法可以执行此操作。但是我使用了data-active = true || false属性来设置切换值。

使用jquery时，相同的解决方案会更短...但是我敢肯定，这就是您在VanillaJS中寻找的东西。

运行代码段并检查其运行方式

(function()
{
    //Note JSON.pasrse("true" || "false") is used to convert string bool to actual bool datatype
    var dropdownTogglers = document.querySelectorAll("a.dropdown-toggler"); //get a list of toggle buttons
    var toggleElementsIds = ["services", "projects"]; //create a list of elements id to be toggled
    var otherLinks = document.querySelectorAll(".link");


    //helper function for getting an element by id
    function _id(id) {
        return document.getElementById(id);
    }

    //Target all other links
    for (var i = 0; i < otherLinks.length; i++) {
        otherLinks[i].addEventListener("click", function () {
            for (var i = 0; i < toggleElementsIds.length; i++) {
                _id(toggleElementsIds[i]).style.display = "none";
                _id(toggleElementsIds[i]).setAttribute("data-active", false);
            }
        });
    }
    _id("content-container").addEventListener("click", function () {
        for (var i = 0; i < toggleElementsIds.length; i++) {
            _id(toggleElementsIds[i]).style.display = "none";
            _id(toggleElementsIds[i]).setAttribute("data-active", false);
        }
    });

    //for all toggler buttons found,
    for(var i = 0; i < dropdownTogglers.length; i++)
    {
        //add a click event to that button
        dropdownTogglers[i].addEventListener("click",
            //get even as parameter
            function(event)
            {
                //use event to know which button is being clicked
                var el = event.target || src.target;

                //check if the button clicked is for services
                if (el.getAttribute("data-el") == toggleElementsIds[0])
                {
                    //check the current state of "data-active" of the services
                    if (!JSON.parse(_id(el.getAttribute("data-el")).getAttribute("data-active"))) {
                        //at this point services "data-active" is false
                        //set it to true
                        _id(el.getAttribute("data-el")).setAttribute("data-active", true);
                        //and ensure that the other toggling elements are hidden, or set to false
                        _id(toggleElementsIds[1]).setAttribute("data-active", false);
                    } else {
                        //at this point the services data-val was true
                        //set it to false
                        _id(el.getAttribute("data-el")).setAttribute("data-active", false);
                    }

                //check if the button clicked is for projects
                } else if (el.getAttribute("data-el") == toggleElementsIds[1])
                {
                    //check the current state of "data-active" of the projects
                    if (!JSON.parse(_id(el.getAttribute("data-el")).getAttribute("data-active"))) {
                        //at this point projects "data-active" is false
                        //set it to true
                        _id(el.getAttribute("data-el")).setAttribute("data-active", true);
                        //and ensure that the other toggling elements are hidden, or set to false
                        _id(toggleElementsIds[0]).setAttribute("data-active", false);
                    } else {
                        //at this point the projects data-val was true
                        //set it to false
                        _id(el.getAttribute("data-el")).setAttribute("data-active", false);

                    }
                }
                //after setting all data-active values, change their display status based on their values
                //call the toggle funtion
                ToggleOperations();
            }
        );
    }

    //perform toggle operations,
    //this function just sets css display properties of toggleElements based on their "data-active" true or false
    function ToggleOperations() {
        //Target all toggle elements
        for (var i = 0; i < dropdownTogglers.length; i++) {
            //if this toggle element "data-val" is true
            if (JSON.parse(_id(toggleElementsIds[i]).getAttribute("data-active")))
            {
                //set its display to block
                _id(toggleElementsIds[i]).style.display = "block";
            } else
            //if this toggle element "data-val" is false
            {
                //set the display to none
                _id(toggleElementsIds[i]).style.display = "none";
            }
        }
    }
})();
html, body{
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: #000;
    z-index: 9000;
}

h1 {
    color: #fff;
    text-transform: uppercase;
}
.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu li {
    position: relative;
}

.menu a {
    padding: 20px;
    display: block;
    color: #fff;
}
.menu a:hover {
    background: #fff;
    color: #333;
}
.menu .sub-menu {
    position: absolute;
    top: 100%;
    background: #000;
    width: 130%;
    left: 0;
    display: none;
}
<nav>
    <h1 class="logo">Hiep</h1>
    <ul class="menu">
        <li><a href="#" class="link">Home</a></li>
        <li><a href="#" class="link">About</a></li>
        <li>
            <a class="dropdown-toggler" data-el="services">Serices</a>
            <ul class="sub-menu" id="services" data-active="false">
                <li><a href="#">Service 1</a></li>
                <li><a href="#">Service 2</a></li>
                <li><a href="#">Service 3</a></li>
                <li><a href="#">Service 4</a></li>
            </ul>
        </li>
        <li><a href="#" class="link">Contact</a></li>
        <li >
            <a class="dropdown-toggler" data-el="projects">Projects</a>
            <ul class="sub-menu" id="projects" data-active="false">
                <li><a href="#">Project 1</a></li>
                <li><a href="#">Project 2</a></li>
                <li><a href="#">Project 3</a></li>
                <li><a href="#">Project 4</a></li>
            </ul>
        </li>
    </ul>
</nav>
<div id="content-container" 
     style="width: 100%;
            height: 100%;
            background-color: whitesmoke;">

</div>

答案 1 :(得分：0)

尝试'：focus-within'。它可能与某些浏览器不兼容。 

 .menu > li:focus-within ul {
    display: block !important;
 }


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	background: #000;
}

h1 {
	color: #fff;
	text-transform: uppercase;
}

.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menu li {
	position: relative;
}

.menu a {
	padding: 20px;
	display: block;
	color: #fff;
}

.menu a:hover {
  background: #fff;
  color: #333;
}

.menu .sub-menu {
    position: absolute;
    top: 100%;
    background: #000;
    width: 130%;
    left: 0;
    display: none;
}

.menu > li:focus-within ul {
   display: block !important;
}
<nav>
	<h1 class="logo">Hiep</h1>
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li>
			<a href="#">Services</a>
			<ul class="sub-menu">
				<li><a href="#">Service 1</a></li>
				<li><a href="#">Service 2</a></li>
				<li><a href="#">Service 3</a></li>
				<li><a href="#">Service 4</a></li>
			</ul>
		</li>
		<li><a href="#">Contact</a></li>
		<li>
			<a href="#">Projects</a>
			<ul class="sub-menu">
				<li><a href="#">Project 1</a></li>
				<li><a href="#">Project 2</a></li>
				<li><a href="#">Project 3</a></li>
				<li><a href="#">Project 4</a></li>
			</ul>
		</li>
	</ul>
</nav>

答案 2 :(得分：0)

只是一个简单的示例。我通常会使用jQuery标记选择器。自从我上次使用vanilla js以来已经有一段时间了。这是我能做的最好的。 

var serviceTab = document.getElementById('serviceTab');
var projectTab = document.getElementById('projectTab');
var serviceSubMenu = document.getElementById('serviceSubMenu');
var projectSubMenu = document.getElementById('projectSubMenu');
var serviceSubMenuDisplayStatus = 0;
var projectSubMenuDisplayStatus = 0;

var content = document.getElementById('contentHere');


serviceTab.onclick = function() {

  if (serviceSubMenuDisplayStatus == 1) {
    serviceSubMenu.style.display = "none";
    serviceSubMenuDisplayStatus = 0;

  } else {
    serviceSubMenu.style.display = "block";
    serviceSubMenuDisplayStatus = 1;
    projectSubMenu.style.display = "none";
    projectSubMenuDisplayStatus = 0;
  }
}

projectTab.onclick = function() {

  if (projectSubMenuDisplayStatus == 1) {
    projectSubMenu.style.display = "none";
    projectSubMenuDisplayStatus = 0;
  } else {
    projectSubMenu.style.display = "block";
    projectSubMenuDisplayStatus = 1;
    serviceSubMenu.style.display = "none";
    serviceSubMenuDisplayStatus = 0;
  }
}

content.onclick = function() {
  if (serviceSubMenuDisplayStatus == 1) {
    serviceSubMenu.style.display = "none";
    serviceSubMenuDisplayStatus = 0;

  }
  if (projectSubMenuDisplayStatus == 1) {
    projectSubMenu.style.display = "none";
    projectSubMenuDisplayStatus = 0;
  } else {
    //do nothing. 
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #fff;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #000;
}

h1 {
  color: #fff;
  text-transform: uppercase;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu li {
  position: relative;
}

.menu a {
  padding: 25px;
  display: block;
}

.menu a:hover {
  background: #fff;
  color: #333;
}

.menu .sub-menu {
  position: absolute;
  top: 100%;
  background: #000;
  width: 130%;
  left: 0;
  display: none;
}
<nav>
  <h1 class="logo">Hiep</h1>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#" id="serviceTab">Services</a>
      <!-- Add some ID here.  -->
      <ul class="sub-menu" id="serviceSubMenu">
        <!-- Add some ID here.  -->
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
        <li><a href="#">Service 4</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li>
      <a href="#" id="projectTab">Projects</a>
      <!-- Add some ID here.  -->
      <ul class="sub-menu" id="projectSubMenu">
        <!-- Add some ID here.  -->
        <li><a href="#">Project 1</a></li>
        <li><a href="#">Project 2</a></li>
        <li><a href="#">Project 3</a></li>
        <li><a href="#">Project 4</a></li>
      </ul>
    </li>
  </ul>
</nav>

<div id="contentHere">
  click here
</div>

相关问题
最新问题