Javascript 单击下拉菜单显示div内容_Javascript_Css_Html_Drop Down Menu

Javascript 单击下拉菜单显示div内容

javascript css html drop-down-menu

Javascript 单击下拉菜单显示div内容,javascript,css,html,drop-down-menu,Javascript,Css,Html,Drop Down Menu,我真的被这件事缠住了。我有一个名为“示例”的下拉菜单，其中包含两个子菜单“submenu1”和“submenu2”。当2个按钮中的任何一个被单击时，它将包含一个图像拇指，该拇指将以lightbox样式显示。但到目前为止，两个拇指都显示出来，这不是我想要的，因为最终的网页将包含数百张图像。根据下面的代码，是否有办法使图像仅在单击一个子菜单时显示。谢谢 <!DOCTYPE html> <head> </head> <body> <

我真的被这件事缠住了。我有一个名为“示例”的下拉菜单，其中包含两个子菜单“submenu1”和“submenu2”。当2个按钮中的任何一个被单击时，它将包含一个图像拇指，该拇指将以lightbox样式显示。但到目前为止，两个拇指都显示出来，这不是我想要的，因为最终的网页将包含数百张图像。根据下面的代码，是否有办法使图像仅在单击一个子菜单时显示。谢谢

<!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>



类别

以下是我要做的：我尽量保持逻辑简单，然后你可以在你的网站上使用类似的东西：）

（如果我错了，请S.O.纠正我！）

CSS:

// 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';
}

给你的子菜单一个ID

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';
}

编辑：

// 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';
}

唷！这花了一段时间。。对不起

看看这个例子：我基本上做了3个版本供你试用

只需单击编辑此笔按钮即可检查代码

哇，我真不敢相信在这么多天之后，我仅仅通过添加一个简单的单词就找到了解决方案。根本不需要搞乱javascript。实际上，在网站的external.js文件中，一位代码开发人员告诉我添加以下内容：过滤器：'.foobar'请参见下面的最终结果

$container.com({
//选择权
animationEngine：“最佳可用”，
itemSelector:“.item thumbs”，
筛选器：'.foobar'，
布局模式：“fitRows”
});
也许你能给我们看一些CSS.work-nav#过滤器{边距：0；填充：0；列表样式：无；}.work-nav#过滤器{填充：0；边距底部：10px；边距左侧：0；边距右侧：0；边距顶部：0；}.work nav#过滤器{颜色：5151515151；字体大小：16px；显示：block；}.work nav#filters li a:hover{color:#5892A8；}.work nav#filters li a.selected{color:#5892A8；}thumbs{边距：0；padding:0；}thumbs li{列表样式类型：无；}.item thumbs{位置：相对；溢出：隐藏；边距底部：30px；光标：指针；}.item thumbs a+img{宽度：100%}.item thumbs.hover wrap{位置：绝对；显示：块；宽度：100%；高度：100%；不透明度：0；过滤器：alpha（不透明度=0）；-webkit转换：所有450ms释放0；-moz转换：所有450ms释放0；-o转换：所有450ms释放0；转换：所有450ms释放0；您可以编辑您的原始帖子：）但我似乎找不到您在java代码中提供的sumenus的ID名称。您能用适当的cla重命名html代码吗SSES和IDS让我有一个更好的图片，因为我有点迷失了。这是因为你没有添加它们。这是一个例子。你应该考虑做一些基本的教程。试着去谷歌：代码学院。它是JavaScript。不是java。谢谢你的链接。我一定要检查一下。我只需要确定一下。您提供的javascript中的ID。是这个吗？getElementById（“子菜单1”）和另一个getElementById（“子菜单2”）。请尝试一个更简单的示例，让您继续。我稍后会将其添加到我的答案中