javascript - 让多个实例只显示被点击的实例

标签 javascript jquery css html multiple-instances

好的,这可能是一个简单的解决方案,但我已经在堆栈溢出和谷歌上进行了搜索,但仍然无法找到它。我有 20-30 组框,您可以搜索并点击,但是当您单击它们时,其他所有内容都会隐藏,然后我会出现一个包含一些信息的框,如果您单击该框或下一个框,则会出现另一个框,依此类推。当然,我不希望所有实例同时显示框,我只希望在我点击后显示。

现在我只关注框的点击。 编辑:我现在也制作了 js fiddle :http://jsfiddle.net/tommhans/ymMW9/ 重点是当我单击一个框时,我希望框文本 1、然后是文本 2、、4 出现。

    <script>
    $(document).ready(function(){  
        $('.testimonial').click (function(){
        $(this).children().toggle(500);

      });

        $("#produkter").click(function(){
        $("#list").show(500);
        $("#list2").hide(500);
      });

          $("#omrader").click(function(){
        $("#list2").show(500);
        $("#list").hide(500);
      });

       $("#begge").click(function(){
        $("#list2").show(500);
        $("#list").show(500);
      });

    });



    </script>
    </head>
    <body>
    <div id="wrap">

      <h1 id="header"><!--searchbar--></h1>

    <div id="buttons">
      <h3 id="produkter">Produkter</h3>
      <h3 id="omrader">Områder</h3>
      <h3 id="begge">Begge</h3>
    </div>  
        <!--Produkter -->
      <ul id="list">
      <h3>PRODUKTER</h3>
            <li class="testimonial">

            <a href="#/australia/"><img src="img/11034.jpg"><h2>CaterClean</h2></a>

            <div class="text">
            <p>Varenr: 11034 </p>
                <p>Bruksområder: Arbeidsområder, Åpne Flater, Kjøkkenbenk, Kjøkkenutstyr, Grill og ovner, Gulv.</p>
                 <p>Info: Brukes til deinfisering, la den virke i 5-10 minutter og den dreper omtrent alle bakteriene som er der. Kan brukes på de fleste områder. Er enten i 5lt kanne eller i 0,75lt spray.</p>
                   <div class="text2">TEST</div>
                    <div class="text3">TEST2</div>
                    <div class="text4">TEST3</div>   
             </div>  



                </li>


            <li class="testimonial">

            <a href="#/australia/"><img src="img/11001.jpg"><h2>Savona d2</h2></a>
                   <div class="text">
            <p>Varenr: 11001</p>
                <p>Bruksområder: Arbeidsområder, Åpne Flater, Kjøkkenbenk, Kjøkkenutstyr, Grill og ovner, Gulv.</p>
                 <p>Info: Brukes til deinfisering, la den virke i 5-10 minutter og den dreper omtrent alle bakteriene som er der. Kan brukes på de fleste områder. Er enten i 5lt kanne eller i 0,75lt spray.</p>
             </div>

                   <div class="text2">TEST</div>
                    <div class="text3">TEST2</div>
                    <div class="text4">TEST3</div>   
            </li>

最佳答案

根据你的描述,这可能是你想要的

$(document).ready(function(){
  $(".test").click(function(){
    $(this).toggle();
    $(".test").toggle();
        $("#info").toggle();
  });
});

关于javascript - 让多个实例只显示被点击的实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23949728/

相关文章:

javascript - 将 ID 注入(inject)组件 : Difference between custom component and "primitive" (<div/>) component?

javascript - 从不在 DOM 中存储中间程序状态?

php - 条件下载页面内容(js、css)

javascript - 如何在元素的动态范围内添加类 - jQuery

javascript - 使用 Jquery 省略字符串中的特殊字符

javascript - jQuery - 如果正文包含确切的字符串,则使变量为真

php - 将 setTimeout 与 AJAX 一起使用的替代方案?

html - 纯 CSS 倾斜/圆形标签

css - DIV 对于里面的文字来说太高了

javascript - 在 python 中实现 SJCL .frombits