1. ホーム
  2. 質問と答え
  3. Divを隠してシングルクリックで新しいものを表示

Divを隠してシングルクリックで新しいものを表示

2017-09-29 9 views
4

これを見てくれてありがとうございます。私は数時間を探して、私の問題に合った解決策を見つけることができません。固定ヘッダーに5つのナビゲーションリンクがあります。 1つのリンクをクリックすると正常に動作します。リンクは隠れたコンテンツを表示します。問題は、2番目のリンクに行くときです。最初のリンクのコンテンツは消えず、2番目のリンクのコンテンツは最初のリンクのコンテンツの下に表示されます。新しいリンクをクリックすると、最初のリンクからコンテンツを非表示にする必要があります。それが問題なのかどうかわかりませんが、私はブートストラップを使っています。Divを隠してシングルクリックで新しいものを表示

function toggler(divId) { 
 
    $("#" + divId).toggle(); 
 
    }
<div class="row"> 
 
      <div class="col"> 
 
       <a href="#" onclick="toggler('slide1');">slide 1</a> 
 
      </div> 
 
      <div class="col"> 
 
       <a href="#" onclick="toggler('slide2');">slide 2</a> 
 
      </div> 
 
      <div class="col"> 
 
       <a href="#" onclick="toggler('slide3');">slide 3</a> 
 
      </div> 
 
      <div class="col"> 
 
       <a href="#" onclick="toggler('slide4');">slide 4</a> 
 
      </div> 
 
      <div class="col"> 
 
       <a href="#" onclick="toggler('slide5');">slide 5</a> 
 
      </div> 
 
    </div> 
 

 
    <div class="container"> 
 
      <div id="slide1" class='hidden'> 
 
      <div class="row"> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      </div> 
 
      </div 
 

 
      <div id="slide2" class='hidden'> 
 
      <div class="row"> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      </div> 
 
      </div> 
 

 
      <div id="slide3" class='hidden'> 
 
      <div class="row"> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      </div> 
 
      </div> 
 
     
 
      <div id="slide4" class='hidden'> 
 
      <div class="row"> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      </div> 
 
      </div> 
 

 
      <div id="slide5" class='hidden'> 
 
      <div class="row"> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      <div class="col"> 
 
       <img src="img.jpg"> 
 
      </div> 
 
      </div> 
 
      </div> 
 
    </div>

https://jsfiddle.net/LLd4sfc9/

出典

2017-09-29 loudenw

+0

あなたはフィドルを提供することはできますか？ – clarkoy

+0

フィディードがあなたの問題を正確に反映するために、外部リソースを追加してください。 – scooterlord

答えて

1

だろう。基本的に、このコードではslide*のdivsにhiddenクラスが追加され、クリックされた現在のslideは除外され、クリックされたスライドのクラスhiddenがトグルされます。最初の回答を補完

function toggler(divId) { 
    $("[id*='slide']").not($("#" + divId)).addClass("hidden"); 
    $("#" + divId).toggleClass("hidden"); 
} 


function toggler(divId) { 
 
    $("[id*='slide']").not($("#" + divId)).addClass("hidden"); 
 
    $("#" + divId).toggleClass("hidden"); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col"> 
 
     <a href="#" onclick="toggler('slide1');">slide 1</a> 
 
    </div> 
 
    <div class="col"> 
 
     <a href="#" onclick="toggler('slide2');">slide 2</a> 
 
    </div> 
 
    <div class="col"> 
 
     <a href="#" onclick="toggler('slide3');">slide 3</a> 
 
    </div> 
 
    <div class="col"> 
 
     <a href="#" onclick="toggler('slide4');">slide 4</a> 
 
    </div> 
 
    <div class="col"> 
 
     <a href="#" onclick="toggler('slide5');">slide 5</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="slide1" class='hidden'> 
 
    <div class="row"> 
 
     <div class="col"> 111 
 
     <img src="img.jpg"> 
 
     </div> 
 
     <div class="col">111 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="slide2" class='hidden'> 
 
    <div class="row"> 
 
     <div class="col"> 222 
 
     <img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 222 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="slide3" class='hidden'> 
 
    <div class="row"> 
 
     <div class="col"> 333 
 
     <img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 333 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="slide4" class='hidden'> 
 
    <div class="row"> 
 
     <div class="col"> 444 
 
     <img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 444 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="slide5" class='hidden'> 
 
    <div class="row"> 
 
     <div class="col"> 555 
 
     <img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 555 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-09-29 02:32:46

+0

これは問題を完全に修正しました、ありがとう – loudenw

0

問題はあなたがそれぞれのdivにクラスを追加jqueryの

1）で他のdiv要素のすべてを隠していないことである。ここに私のコードですそれはトグルする必要があります

2）jsで、そのクラスのすべてのdivを非表示にします

新しいHTMLは次のようになります。

<div class="row"> 
     <div class="col"> 
      <a href="#" onclick="toggler('slide1');">slide 1</a> 
     </div> 
     <div class="col"> 
      <a href="#" onclick="toggler('slide2');">slide 2</a> 
     </div> 
     <div class="col"> 
      <a href="#" onclick="toggler('slide3');">slide 3</a> 
     </div> 
     <div class="col"> 
      <a href="#" onclick="toggler('slide4');">slide 4</a> 
     </div> 
     <div class="col"> 
      <a href="#" onclick="toggler('slide5');">slide 5</a> 
     </div> 
</div> 

<div class="container"> 
     <div id="slide1" class='hidden slide'> 
     <div class="row"> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     </div> 
     </div 

     <div id="slide2" class='hidden slide'> 
     <div class="row"> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     </div> 
     </div> 

     <div id="slide3" class='hidden slide'> 
     <div class="row"> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     </div> 
     </div> 

     <div id="slide4" class='hidden slide'> 
     <div class="row"> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     </div> 
     </div> 

     <div id="slide5" class='hidden slide'> 
     <div class="row"> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     <div class="col"> 
      <img src="img.jpg"> 
     </div> 
     </div> 
     </div> 
</div>

とJavaScriptはあなたが以下のようになり、あなたのJSを変更することができます

function toggler(divId) { 
    // hide all other divs first 
    $('.slide').hide(); 
    $("#" + divId).toggle(); 
}

出典

2017-09-29 02:27:53

0

、閉じられていないdivsが機能からJSを防止するHTMLです。以下のスニペットが機能します。

function toggler(divId) { 
 
    $(".slide").hide(); 
 
    $("#" + divId).show(); 
 
}
img { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
} 
 

 
.slide { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col"> 
 
    <a href="#" onclick="toggler('slide1');">slide 1</a> 
 
    </div> 
 
    <div class="col"> 
 
    <a href="#" onclick="toggler('slide2');">slide 2</a> 
 
    </div> 
 
    <div class="col"> 
 
    <a href="#" onclick="toggler('slide3');">slide 3</a> 
 
    </div> 
 
    <div class="col"> 
 
    <a href="#" onclick="toggler('slide4');">slide 4</a> 
 
    </div> 
 
    <div class="col"> 
 
    <a href="#" onclick="toggler('slide5');">slide 5</a> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 

 
    <div id="slide1" class='slide'> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     1<img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="slide2" class='slide'> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     2<img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="slide3" class='slide'> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     3<img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="slide4" class='slide'> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     4<img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="slide5" class='slide'> 
 
    <div class="row"> 
 
     <div class="col"> 
 
     5<img src="img.jpg"> 
 
     </div> 
 
     <div class="col"> 
 
     <img src="img.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

出典

2017-09-29 02:33:56 jfeferman

0

あなたはトグルアクションの前にこのコードを追加することができます。

$('[id^="slide"]').hide();

それとも、あなたが1を示し、すべての最初のを隠し、する必要があり、この答え JQuery: Toggle Element that is clicked and hide all other

出典

2017-09-29 02:36:22

0 

"use strict"; 
 

 
let menu = document.querySelector('.row'); 
 
let menuItems = document.querySelector('.container'); 
 
let sliders = menuItems.querySelectorAll('div.hidden'); 
 

 
menu.addEventListener('click', showMenu); 
 

 
function showMenu(event) { 
 
    event.preventDefault(); 
 

 
    let target = event.target; 
 

 
    if (target.tagName !== 'A') { 
 
     return; 
 
    } 
 

 
    let slide = target.getAttribute('data-slide'); 
 
    let slideId = '#' + slide; 
 
    let currentSlider = menuItems.querySelector(slideId); 
 
    let currentClass = currentSlider.className; 
 

 

 
    for (let i = 0, max = sliders.length; i < max; i++) { 
 
     sliders[i].className = 'hidden'; 
 
    } 
 
    
 
    if (!currentClass) { 
 
     currentSlider.className = 'hidden'; 
 
     return; 
 
    } 
 

 
    currentSlider.className = ''; 
 
}
.hidden { 
 
    display: none; 
 
}
<div class="row"> 
 
    <div class="col"> 
 
     <a href="#" data-slide="slide1">slide 1</a> 
 
    </div> 
 
    <div class="col"> 
 
     <a href="#" data-slide="slide2">slide 2</a> 
 
    </div> 
 
    <div class="col"> 
 
     <a href="#" data-slide="slide3">slide 3</a> 
 
    </div> 
 
    <div class="col"> 
 
     <a href="#" data-slide="slide4">slide 4</a> 
 
    </div> 
 
    <div class="col"> 
 
     <a href="#" data-slide="slide5">slide 5</a> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="slide1" class='hidden'> 
 
     <div class="row"> 
 
      <div class="col"> 
 
       111 
 
      </div> 
 
      <div class="col"> 
 
       111 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div id="slide2" class='hidden'> 
 
     <div class="row"> 
 
      <div class="col"> 
 
       222 
 
      </div> 
 
      <div class="col"> 
 
       222 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div id="slide3" class='hidden'> 
 
     <div class="row"> 
 
      <div class="col"> 
 
       333 
 
      </div> 
 
      <div class="col"> 
 
       333 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div id="slide4" class='hidden'> 
 
     <div class="row"> 
 
      <div class="col"> 
 
       444 
 
      </div> 
 
      <div class="col"> 
 
       444 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div id="slide5" class='hidden'> 
 
     <div class="row"> 
 
      <div class="col"> 
 
       555 
 
      </div> 
 
      <div class="col"> 
 
       555 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

ただ、もう一つの例として、純粋なJS

出典

2017-09-29 02:40:57 zhuravlyov

0

中を確認することができますあなたは欲しい。ジェネリックjQueryを使用しましたが、代わりにブートストラップの折りたたみ関数を使用することができます。

$('.slide-toggle').click(function() { 
 
    var $this = $(this) 
 
    $('.slide').hide().filter(function() { return $(this).data('slide') === $this.data('toggle') }).show() 
 
})
.slide { 
 
    padding: 10px; 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="slide-toggle" data-toggle="1">Show Slide 1</button> 
 

 
<button class="slide-toggle" data-toggle="2">Show Slide 2</button> 
 

 
<button class="slide-toggle" data-toggle="3">Show Slide 3</button> 
 

 
<div class="slide" data-slide="1">Slide 1</div> 
 

 
<div class="slide" data-slide="2">Slide 2</div> 
 

 
<div class="slide" data-slide="3">Slide 3</div>

出典

2017-09-29 02:41:30

関連する問題

 関連する問題