0

私は本当にこれにこだわっています。「submenu1」と「submenu2」の 2 つのサブメニューを含む「Example」というドロップダウン メニューがあります。2 つのいずれかがクリックされると、ライトボックス スタイルで表示されるイメージ サムが含まれます。しかし、今のところ両方の親指が表示されていますが、最終的な Web ページには何百もの画像が含まれるため、これは私が望むものではありません。以下のコードに従って、1 つのサブメニューがクリックされたときにのみ画像を表示する方法はありますか。ありがとう

<!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 に答える