Question

我真的被困在这上面了。我有一个名为“Example”的下拉菜单，其中包含2个子菜单“submenu1”和“submenu2”。单击2中的任何一个时，它将包含将以灯箱样式显示的图像拇指。但截至目前，两个拇指都显示出来，这不是我想要的，因为最终的网页将包含数百张图片。根据下面的代码，是否有办法只在单击一个子菜单时才显示图像。感谢

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

Answer 1

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

（如果我错在这里，请S.O.纠正我！）

<强> CSS：

为您的子菜单提供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';
}

修改

呼！这花了一段时间..对不起！

看看这个例子：我基本上为你试了3个版本。

只需点击编辑此笔按钮即可查看代码！

Example

Answer 2

通过添加一个简单的单词，我无法相信我在这么多天后找到了解决方案。根本不必乱用javascript。实际上，在网站的外部.js 文件中，代码开发人员告诉我添加以下内容：过滤器：'。foobar'请参阅下面的最终结果{{1 }}

单击下拉菜单显示div内容

2 个答案: