Dropdown-Menü funktioniert nicht richtig

Also habe ich dieses Drop-Down-Menü erstellt und es funktioniert gut, bis ich den Titel "Most Popular" schwebe. Wenn dieses Ereignis eintritt, bleibt die Höhe des Abschnitts bei 0px, wenn er 370px betragen sollte. Ich verstehe wirklich nicht warum. Kann mir jemand helfen?Dropdown-Menü funktioniert nicht richtig

<!DOCTYPE html> 
<html> 
<head> 
    <title>list</title> 
    <!--links in font--> 
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200' rel='stylesheet' type='text/css'> 
    <!--links in jQuery--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
</head> 
<style type="text/css"> 
/* do not include in production */ 
    * { 
     margin: 0; 
     padding: 0; 
     border: 0; 
    } 
    body { 
     background-color: whitesmoke; 
     font-family: 'Yanone Kaffeesatz', sans-serif; 
     color: white; 
    } 
    .cards { 
     background: white; 
     padding: 10px; 
     margin: 5px auto; 
     border: #DDD solid 1px; 
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); 
    } 
/* INCLUDE */ 
    #n-wrap { 
     max-width: 950px; 
     height: 590px; 
     overflow: hidden; 
     margin: 0 auto 10px; 
    } 
    .n-titles { 
     line-height: 50px; 
     width: 100%; 
     height: 50px; 
     text-align: center; 
     transition: background-color 0.5s ease; 
     color: black; 
    } 
    .n-titles:first-child { 
     background-color: #888; 
     color: white; 
    } 
    .n-titles:nth-child(n+2):hover { 
     background-color: rgb(96, 223, 229); 
     color: white; 
     cursor: pointer; 
    } 
    .n-titles:nth-child(n+2):hover + .n-items { 
     height: 370px; 
    } 
    .n-items { 
     height: 0px; 
     width: 100%; 
     transition: height 0.5s ease; 
     background-color: white; 
     overflow: hidden; 
     text-align: center; 
    } 
    .n-items img { 
     width: 25%; 
     padding-top: 15px; 
    } 
    .n-items img:nth-child(2) { 
     padding: 0px 40px 0px 40px; 
    } 
    .n-items:hover { 
     height: 370px; 
    } 
    #highlight { 
     background-color: rgb(96, 223, 229); 
     color: white; 
    } 
</style> 
<body> 
    <div id="n-wrap" class="cards"> 
     <div class="n-titles">FEATURED</div> 
     <div class="n-titles">Most Popular</div> 
     <div class="n-items"> 
      <img src="pseudo_img.jpg"> 
      <img src="pseudo_img.jpg"> 
      <img src="pseudo_img.jpg"> 
     </div> 
     <div class="n-titles">On Sale</div> 
     <div class="n-items"> 
      <img src="pseudo_img.jpg"> 
      <img src="pseudo_img.jpg"> 
      <img src="pseudo_img.jpg"> 
     </div> 
     <div class="n-titles">Newest</div> 
     <div class="n-items"> 
      <img src="pseudo_img.jpg"> 
      <img src="pseudo_img.jpg"> 
      <img src="pseudo_img.jpg"> 
     </div> 
    </div> 
    <div style="height: 100vh"></div> 
</body> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      //always have first section open 
      $(".n-items:nth-child(3)").css("height", "370"); 
      //highlight specific title 
      $(".n-items, .n-titles").hover(function() { 
       $(".n-items:nth-child(3)").css("height", "0"); 
       $(".n-titles").removeAttr("id"); 
       switch ($(this).index()) { 
        case 2: 
        $(".n-items:nth-child(3)").css("height", "370"); 
        $(".n-titles:nth-child(2)").attr("id", "highlight"); 
        break; 
        case 4: 
        $(".n-items:nth-child(3)").css("height", "0"); 
        $(".n-titles:nth-child(4)").attr("id", "highlight"); 
        break; 
        case 6: 
        $(".n-items:nth-child(3)").css("height", "0"); 
        $(".n-titles:nth-child(6)").attr("id", "highlight"); 
        break; 
       } 
      }, function() { 
       for (var i = 2; i <= 6; i +=2) { 
        $(".n-titles:nth-child(" + i + ")").removeAttr("id"); 
       } 
       $(".n-items:nth-child(3)").css("height", "370"); 
      }); 
     }); 
    </script> 
</html>

hier ein in Ihrem JavaScript jsfiddle

Quelle

2016-03-22 Alex M

ist also hinzufügen, Sie Höhe inline Markup Werte (entweder 0px oder 370px. Diese Inline-Stile werden in der Standardeinstellung außer Kraft setzen, was auch immer in Ihrem Stylesheet ist Dies ist, wie CSS Spezifität funktioniert.

... Inline-Style-Regeln immer die höchste Spezifität haben, die nur Weg, um sie in der CSS-Kaskade zu überschreiben, wird die wichtige Aussage über die relevante declarations- nutzen zu können! Ein Ansatz, der einen Wartungs-Albtraum erzeugt. (Via Sitepoint)

Sitepoint hat auch Sie die Lösung dieses Problems gegeben (na ja, die schnellste Lösung, wenn nicht die beste); füge eine !important Flagge auf Ihre Hover-Erklärung:

.n-titles:nth-child(n+2):hover + .n-items { 
    /* Important needed here to override inline CSS generated by JS */ 
    height: 370px!important; 
}

Während der obige Code Ihr erstes Problem löst, können Sie, wenn anstelle von Inline-Stilen zu erforschen, können Sie die gleiche Art von Funktionalität JS erhalten können, indem stattdessen mit zu Wenden Sie Klassen an, die den Zustand des Akkordeons kennzeichnen (wie is-openis-closed), mit denen Sie dann das gesamte CSS in Ihrem Stylesheet steuern können.

Quelle

2016-03-22 19:54:17 Angelique

Dropdown-Menü funktioniert nicht richtig

Antwort

Verwandte Themen