Попытка создать выпадающее меню, используя jQuery, но ничего не происходит - PullRequest
Новая
       9

Попытка создать выпадающее меню, используя jQuery, но ничего не происходит

0 голосов
/ 29 января 2020

Я учусь и пытаюсь создать выпадающее меню, используя jQuery для приятного эффекта. Очевидно, я делаю что-то не так, потому что ничего не происходит. Я уже проверил другие подобные ответы, но, видимо, я что-то упускаю, потому что до сих пор не могу заставить его работать.

Я сделал jsfiddle , надеюсь, это поможет. 

$("#menu").hover(function() {
  $(this).find("ul").slideDown("slow");
}, function() {
  $(this).find("ul").slideUp("slow");
});
#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
  background-color: rgba(71, 94, 97);
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: #444;
  border-width: 1px 1px 0;
  margin: 0 1em;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu, 
#toggle-menu {
  background-color: #09c;
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  text-decoration: none;
}

#menu a:hover {
  background-color: #9ba2a3;
  color: #f0f4f5;
}

#menu .sub-menu {
  display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a:hover {
  color: #444;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 1.25em;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

#menu .drop-icon {
  line-height: 1;
}


@media only screen and (max-width: 64em) and (min-width: 52.01em) {
  #menu li {
    width: 33.333%;
  }

  #menu .sub-menu li {
    width: auto;
  }
}

@media only screen and (min-width: 52em) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000;
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu">
	  <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label>
	  <input type="checkbox" id="tm">
	  <ul class="main-menu clearfix">
	    <li><a href="#">Inicio</a></li>
	    <li><a href="#">Por habitación
	        <span class="drop-icon">▾</span>
	        <label title="toggle drop-down" class="drop-icon" for="PorHabitacion">▾</label>
	      </a>
	      <input type="checkbox" id="PorHabitacion">
	      <ul class="sub-menu">
	        <li><a href="#">Cocina</a></li>
	        <li><a href="#">Sala</a></li>
	        <li><a href="#">Comedor</a></li>
	        <li><a href="#">Balcón</a></li>
	        <li><a href="#">Baño</a></li>
	        <li><a href="#">Home-office</a></li>
	        <li><a href="#">Dormitorio
	            <span class="drop-icon">▾</span>
	            <label title="toggle drop-down" class="drop-icon" for="Dormitorios">▾</label>
	          </a>
	          <input type="checkbox" id="Dormitorios">
	          <ul class="sub-menu">
	            <li><a href="#">Principal</a></li>
	            <li><a href="#">Nursery</a></li>
	            <li><a href="#">Infantil</a></li>
	            <li><a href="#">Juvenil</a></li>
	          </ul>
	        </li>

	        <li><a href="#">Exterior
	            <span class="drop-icon">▾</span>
	            <label title="toggle drop-down" class="drop-icon" for="Exterior">▾</label>
	          </a>
	          <input type="checkbox" id="Exterior">
	          <ul class="sub-menu">
	            <li><a href="#">Jardín</a></li>
	            <li><a href="#">Balcón</a></li>
	            <li><a href="#">Terraza</a></li>
	          </ul>
	        </li>
	      </ul>
	    </li>

	    <ul>
	      <li><a href="#">Por tipo
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="PorTipo">▾</label>
	        </a>
	        <input type="checkbox" id="PorTipo">
	        <ul class="sub-menu">
	          <li><a href="#">Departamento</a></li>
	          <li><a href="#">Casa</a></li>
	          <li><a href="#">Loft</a></li>
	          <li><a href="#">Oficina</a></li>
	          <li><a href="#">Hotel</a></li>
	          <li><a href="#">Comercio</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Decoración
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="Decoracion">▾</label>
	        </a>
	        <input type="checkbox" id="Decoracion">
	        <ul class="sub-menu">
	          <li><a href="#">Iluminación</a></li>
	          <li><a href="#">Electrodomésticos</a></li>
	          <li><a href="#">Menaje</a></li>
	          <li><a href="#">Muebles</a></li>
	          <li><a href="#">Objetos</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Ideas y Guías
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="Ideas">▾</label>
	        </a>
	        <input type="checkbox" id="Ideas">
	        <ul class="sub-menu">
	          <li><a href="#">Proyectos DIY</a></li>
	          <li><a href="#">Revestimientos</a></li>
	          <li><a href="#">Pintura</a></li>
	          <li><a href="#">Mudanza</a></li>
	          <li><a href="#">Organización</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Fechas especiales
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="FechasEsp">▾</label>
	        </a>
	        <input type="checkbox" id="FechasEsp">
	        <ul class="sub-menu">
	          <li><a href="#">Navidad</a></li>
	          <li><a href="#">Halloween</a></li>
	          <li><a href="#">Bodas</a></li>
	          <li><a href="#">Cumpleaños</a></li>
	          <li><a href="#">San Valentín</a></li>
	        </ul>
	      </li>
	    </ul>

	  </ul>
	</nav>

Заранее спасибо!

1 Ответ

0 голосов
/ 30 января 2020

Ваш код работает нормально! Тот факт, что он полностью разрушается, обусловлен выбором списков UL. Если этого не ожидается, вы можете заменить его, как показано ниже, ограничив выбор первым дочерним элементом UL.

То же самое относится и к подменю. 

$("#menu").hover(function() {
  $(this).children('ul').first().slideDown("slow");
}, function() {
  $(this).children('ul').first().slideUp("slow");
});

$("li:has('label.drop-icon')").hover(function() {
  $(this).children('ul').first().slideDown("slow");
}, function() {
  $(this).children('ul').first().slideUp("slow");
});
#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
  background-color: rgba(71, 94, 97);
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: #444;
  border-width: 1px 1px 0;
  margin: 0 1em;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu, 
#toggle-menu {
  background-color: #09c;
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  text-decoration: none;
}

#menu a:hover {
  background-color: #9ba2a3;
  color: #f0f4f5;
}

#menu .sub-menu {
  display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a:hover {
  color: #444;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 1.25em;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

#menu .drop-icon {
  line-height: 1;
}


@media only screen and (max-width: 64em) and (min-width: 52.01em) {
  #menu li {
    width: 33.333%;
  }

  #menu .sub-menu li {
    width: auto;
  }
}

@media only screen and (min-width: 52em) {
  #menu .main-menu {
    display: block;
  }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000;
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu">
	  <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label>
	  <input type="checkbox" id="tm">
	  <ul class="main-menu clearfix">
	    <li><a href="#">Inicio</a></li>
	    <li><a href="#">Por habitación
	        <span class="drop-icon">▾</span>
	        <label title="toggle drop-down" class="drop-icon" for="PorHabitacion">▾</label>
	      </a>
	      <input type="checkbox" id="PorHabitacion">
	      <ul class="sub-menu">
	        <li><a href="#">Cocina</a></li>
	        <li><a href="#">Sala</a></li>
	        <li><a href="#">Comedor</a></li>
	        <li><a href="#">Balcón</a></li>
	        <li><a href="#">Baño</a></li>
	        <li><a href="#">Home-office</a></li>
	        <li><a href="#">Dormitorio
	            <span class="drop-icon">▾</span>
	            <label title="toggle drop-down" class="drop-icon" for="Dormitorios">▾</label>
	          </a>
	          <input type="checkbox" id="Dormitorios">
	          <ul class="sub-menu">
	            <li><a href="#">Principal</a></li>
	            <li><a href="#">Nursery</a></li>
	            <li><a href="#">Infantil</a></li>
	            <li><a href="#">Juvenil</a></li>
	          </ul>
	        </li>

	        <li><a href="#">Exterior
	            <span class="drop-icon">▾</span>
	            <label title="toggle drop-down" class="drop-icon" for="Exterior">▾</label>
	          </a>
	          <input type="checkbox" id="Exterior">
	          <ul class="sub-menu">
	            <li><a href="#">Jardín</a></li>
	            <li><a href="#">Balcón</a></li>
	            <li><a href="#">Terraza</a></li>
	          </ul>
	        </li>
	      </ul>
	    </li>

	    <ul>
	      <li><a href="#">Por tipo
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="PorTipo">▾</label>
	        </a>
	        <input type="checkbox" id="PorTipo">
	        <ul class="sub-menu">
	          <li><a href="#">Departamento</a></li>
	          <li><a href="#">Casa</a></li>
	          <li><a href="#">Loft</a></li>
	          <li><a href="#">Oficina</a></li>
	          <li><a href="#">Hotel</a></li>
	          <li><a href="#">Comercio</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Decoración
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="Decoracion">▾</label>
	        </a>
	        <input type="checkbox" id="Decoracion">
	        <ul class="sub-menu">
	          <li><a href="#">Iluminación</a></li>
	          <li><a href="#">Electrodomésticos</a></li>
	          <li><a href="#">Menaje</a></li>
	          <li><a href="#">Muebles</a></li>
	          <li><a href="#">Objetos</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Ideas y Guías
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="Ideas">▾</label>
	        </a>
	        <input type="checkbox" id="Ideas">
	        <ul class="sub-menu">
	          <li><a href="#">Proyectos DIY</a></li>
	          <li><a href="#">Revestimientos</a></li>
	          <li><a href="#">Pintura</a></li>
	          <li><a href="#">Mudanza</a></li>
	          <li><a href="#">Organización</a></li>
	        </ul>
	      </li>
	    </ul>

	    <ul>
	      <li><a href="#">Fechas especiales
	          <span class="drop-icon">▾</span>
	          <label title="toggle drop-down" class="drop-icon" for="FechasEsp">▾</label>
	        </a>
	        <input type="checkbox" id="FechasEsp">
	        <ul class="sub-menu">
	          <li><a href="#">Navidad</a></li>
	          <li><a href="#">Halloween</a></li>
	          <li><a href="#">Bodas</a></li>
	          <li><a href="#">Cumpleaños</a></li>
	          <li><a href="#">San Valentín</a></li>
	        </ul>
	      </li>
	    </ul>

	  </ul>
	</nav>

[EXTRA]: эта скрипка использует hoverIntent в качестве альтернативы jQuery hover ( ) метод, позволяющий избежать быстрого взаимодействия с событиями и не позволяющего пользователю ориентироваться на подменю. 

$("body").hoverIntent(function() {
  $(this).children('ul').first().slideDown("slow")},function() {
  $(this).children('ul').first().slideUp("slow");
},'#menu');

$("#menu").hoverIntent(function() {
  $(this).children('ul').first().slideDown("slow")},function() {
  $(this).children('ul').first().slideUp("slow");
},"li:has('label.drop-icon')");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...