0

我真的坚持这一点。我有一个名为“示例”的下拉菜单，其中包含 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>
4

2 回答 2

0

哇，我简直不敢相信，这么多天后，我只添加了一个简单的词就找到了解决方案。根本不必弄乱javascript。实际上，在网站的外部 .js文件中，代码开发人员告诉我添加以下内容：filter: '.foobar' 请参见下面的最终结果 $container.isotope({ // options animationEngine: 'best-available', itemSelector : '.item-thumbs', filter: '.foobar', layoutMode : 'fitRows' });

于 2013-10-17T13:13:37.367 回答
0

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

（如果我在这里错了，请纠正我！）

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 个版本供您试用。

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

例子

于 2013-10-17T08:01:54.873 回答