Afficher le contenu div sur le menu déroulant

Je suis vraiment coincé là-dessus. J'ai un menu déroulant appelé "Exemple" qui contient 2 sous-menus "submenu1" et "submenu2". Lorsque l'un des deux est cliqué, il contiendra un pouce d'image qui sera affiché dans le style de la visionneuse. Mais à partir de maintenant les deux pouces sont affichés et ce n'est pas ce que je veux parce que la page web finale contiendra des centaines d'images. Est-il possible de faire apparaître les images uniquement lorsqu'un clic est effectué sur un sous-menu, selon le code ci-dessous. MerciAfficher le contenu div sur le menu déroulant

<!DOCTYPE html> 
<head> 
</head> 
<body>   
<!-- Portfolio Projects --> 
    <div class="row"> 
     <div class="span3"> 
      <!-- Filter --> 
      <nav id="options" class="work-nav"> 
       <ul id="filters" class="option-set" data-option-key="filter"> 
        <li class="type-work">CATEGORIES</li> 
        <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" 
    >BAPTISM 
        <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <li class="dropdown-submenu"> 
        <a href="#" class="selected">BOY CLOTHING</a> 
        <ul class="dropdown-menu"> 
        <li><a href="#filter" data-option- 
     value=".boy" tabindex="-1">Clothing</a></li> 
        </ul> 
        </li> 
        <li class="dropdown-submenu"> 
        <a href="#">GIRL CLOTHING</a> 
        <ul class="dropdown-menu"> 
        <li><a href="#filter" data-option- 
       value=".girl" tabindex="-1">Clothing</a></li> 
</ul> 
        </li> 
        </ul> 


        </li> 

</ul> 
    </li> 
     </nav> 
     <script src="http://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script>   

       </ul> 
      </nav> 
      <!-- End Filter --> 
     </div> 

     <div class="span9"> 
      <div class="row"> 
       <section id="projects"> 
        <ul id="thumbs"> 

         <!-- gallery starts here --> 

         <li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled  
          - Title - Full Image --> 
<a class="hover-wrap fancybox" data-fancybox-group="boy" 
    title="" href="_include/img/work/full/boy_clothing.jpg"> 
           <span class="overlay-img"></span> 

          </a> 
          <!-- Thumb Image and Description --> 
          <img src="_include/img/work/thumbs/boy_clothing.jpg" alt=""> 
         </li> 
         <li class="item-thumbs span3 girl"> 
          <!-- Fancybox - Gallery Enabled - Title - Full Image --> 
          <a class="hover-wrap fancybox" data-fancybox-group="girl"  
          title="" href="_include/img/work/full/girl_clothing.jpg"> 
<span class="overlay-img"></span> 

          </a> 
          <!-- Thumb Image and Description --> 
        <img src="_include/img/work/thumbs/girl_clothing.jpg" 
alt="">   
         </li> 
        </ul> 
       </section> 

      </div> 
     </div> 
    </div> 
    <!-- End Portfolio Projects --> 




</body> 
</html>

Source

2013-10-13 user2875913

Peut-être pouvez-vous nous montrer un peu de CSS – JuSchz

. work-nav #filters { \t marge: 0; \t remplissage: 0; \t style de liste: aucun; } .work-nav #filters li { \t remplissage: 0; \t marge inférieure: 10px; \t marge gauche: 0; \t marge droite: 0; \t marge supérieure: 0; } .work-nav #filtres li a { \t couleur: # 515151; \t taille de police: 16px; \t affichage: bloc; } .work-nav #filters li a: hover { \t couleur: # 5892A8; } .work-nav #filtres li a.selected { \t couleur: # 5892A8; } #thumbs { \t marge: 0; \t remplissage: 0; \t } – user2875913

#thumbs li { \t Type de style liste: aucun; } .item-thumbs { \t position: relative; \t dépassement: masqué; \t marge inférieure: 30px; \t curseur: pointeur; } .item-thumbs a + img { \t largeur: 100%; \t } – user2875913

WOW je ne peux pas croire que je trouve la solution après tant de jours en ajoutant juste un mot simple. N'a pas eu à jouer avec javascript du tout. En fait, dans les .js externes fichier du site, on m'a dit par un développeur de code pour ajouter ce qui suit: filtre: « .foobar » Voir le résultat final ci-dessous $container.isotope({ // options animationEngine: 'best-available', itemSelector : '.item-thumbs', filter: '.foobar', layoutMode : 'fitRows' });

Source

2013-10-17 13:13:37 user2875913

Voici ce que je ferais: je essayer de garder la logique simple, vous pouvez simplement utiliser quelque chose de similaire sur votre site :)

(S'il vous plaît corrigez-moi si je me trompe ici)

CSS:

Donnez votre ID un sous-menus

JavaScript:

// 2 event listeners that will run a function when the submenu is clicked: 

var sub_menu_1 = document.getElementById("submenu1"); 
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false); 

var sub_menu_2 = document.getElementById("submenu2"); 
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false); 

function DISPLAY_menu_1() { 
    // Do whatever CSS you need here, I simply make the entire DIV 'visible': 
    sub_menu_1.style.visibility = 'visible'; 
    // For good measures, lets make submenu2 'invisible': 
    sub_menu_2.style.visibility = 'hidden'; 
} 
function DISPLAY_menu_2() { 
    // Same in Reverse 
    sub_menu_2.style.visibility = 'visible'; 

    sub_menu_1.style.visibility = 'hidden'; 
}

EDIT:

Ouf! Cela a pris un certain temps .. Désolé à ce sujet!

Jetez un coup d'œil à cet exemple: J'ai essentiellement créé 3 versions pour que vous puissiez l'essayer.

Cliquez simplement sur le bouton Modifier ce stylo pour vérifier le code!

Example

Source

2013-10-17 08:01:54 Schoening

Je n'arrive pas à trouver le nom d'identifiant du sumenus que vous avez fourni dans le code java. Pourriez-vous s'il vous plaît renommer le code html avec les classes et les ID appropriés afin que j'ai une meilleure image, parce que je suis un peu perdu. – user2875913

C'est parce que vous ne les avez pas ajoutés. Ceci est un exemple. Vous devriez envisager de faire quelques tutoriels de base. Essayez de google: Codeacademy – Schoening

Aussi. C'est JavaScript. Pas Java. Des langues totalement différentes – Schoening

Afficher le contenu div sur le menu déroulant

Répondre

Questions connexes