-2

ボタン 1 をクリックするとコンテンツが表示され、ボタン 2 をクリックするとコンテンツが表示されます。 ボタン 1 をクリックするとコンテンツが表示され、次にボタン 2 がクリックされるとボタン 1 のコンテンツが非表示になり、ボタン 2 のコンテンツ

が表示され ます。また、その逆も同様です。つまり、ボタン 1 とボタン 2 のコンテンツを同時に表示することはできません。


You can find the code at:jsfiddle.net/4HYcX/97/

これはjsfiddleのコードです：

.interactContainers {
    display:none;
    margin-top: 4px;
}

function toggleInteractContainers(x) {
    if ($('#'+x).is(":hidden")) {
        $('#'+x).slideDown(200);
    } else {
        $('#'+x).hide();
    }
    $('.interactContainers').hide();
}

<a href="#" onclick="return false" onmousedown="toggleInteractContainers('one');">Button One</a>  
<div class="interactContainers" id="one">
    Content for Button One. <a href="#" onclick="return false" onmousedown="toggleInteractContainers('one');" title="Close">Exit</a>
</div>
<a href="#" onclick="return false" onmousedown="toggleInteractContainers('two');">Button Two</a>
<div class="interactContainers" id="two">
    Content for Button Two. <a href="#" onclick="return false" onmousedown="toggleInteractContainers('two');" title="Close">Exit</a>
</div>
4

5 に答える 5

0

コードを更新しました。ボタン 1 とボタン 2 は、1 回のクリックで機能する必要があります。

<div style="color:red">Content for Button One and Button Two should not be open at the same time.</div>
  <br />
  <a href="#" onclick="return false" onmousedown="toggleInteractContainers('one','two');">Button One</a>
  <div class="interactContainers" id="one">
      <span style="color:red">Content</span> for Button One. <a href="#" onclick="return false" onmousedown="toggleInteractContainers('one','two');" title="Close">Exit</a>
    </div>
  <br />
  <a href="#" onclick="return false" onmousedown="toggleInteractContainers('two','one');">Button Two</a>
  <div class="interactContainers" id="two">
        <span style="color:red">Content</span> for Button Two. <a href="#" onclick="return false" onmousedown="toggleInteractContainers('two','one');" title="Close">Exit</a>
    </div>

JS:

function toggleInteractContainers(x,y) {
        if ($('#'+x).is(":hidden")) {
            $('#'+x).slideDown(200);
            $('#'+y).hide();
        } else {
            $('#'+x).hide();
            $('#'+y).slideDown(200);
        }
    //if $('.interactContainers').hide(); is commented out it's a single click but the Content for the buttons stay open when each is clicked.
        //$('.interactContainers').hide();
    }
于 2013-09-08T17:16:53.643 に答える
0

現在クリックされている要素ではないものを上にスライドします。

デモ

function toggleInteractContainers(x) {
    $('.interactContainers').not('#' + x).slideUp(200);
    if ($('#' + x).is(":hidden")) {
        $('#' + x).slideDown(200);
    } else {
        $('#' + x).slideUp(); // <== also changed to slideUp instead of hide
    }
}
于 2013-09-08T17:17:22.003 に答える