0

Web サイトのツリー ナビゲーション メニューとして、コンテンツの非表示と表示 (トグル) に次の jQuery を使用しています。このコードは、クリックすると一度に 1 つの div しか表示されないため、非常に便利であることがわかりました。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function show_region(chosen_region) {
     $('.city_div').each(function(index) {
          if ($(this).attr("id") == chosen_region) {
               $(this).slideDown(200);
          }
          else {
               $(this).slideUp(600);
          }  
     });
}
</script>

<style type="text/css">
   .city_div {display: none;}
</style>


<a href="javascript:show_region('box01');">North</a><br>
<div class="city_div" id="box01">Div #01</div>

<a href="javascript:show_region('box02');">Centre</a><br>
<div class="city_div" id="box02">Div #02</div>

<a href="javascript:show_region('box03');">South</a><br>
<div class="city_div" id="box03">Div #03</div>

問題は、別の div を開くことによってのみ div を閉じることができることです。

2回目のクリックでdivを閉じる方法は?

4

8 に答える 8

4

を使用して、 からにslideToggle変更できます。slideDownslideToggle

function show_region(chosen_region) {
     $('.city_div').each(function(index) {
          if ($(this).attr("id") == chosen_region) {
               $(this).slideToggle(200); // instead of slideDown
          }
          else {
               $(this).slideUp(600);
          }  
     });
}
于 2012-10-09T14:39:29.380 に答える
2

まず、インライン イベント ハンドラを使用しないでください。

<script type="text/javascript">
$(document).ready(function() {
    var boxes = $('.city_div');

    $('.city-toggle').click(function(e) {
        var box = $(this).next();
        var isHidden = box.is(':hidden');

        boxes.slideUp(600);

        if(isHidden) {
            box.slideDown(200);
        }

        e.preventDefault();
    });
});
</script>

<style type="text/css">
   .city_div {display: none;}
</style>


<a href="something-meaningful-like-north.html" class="city-toggle">North</a>
<div class="city_div" id="box01">Div #01</div>

<a href="ditto.html" class="city-toggle">Centre</a>
<div class="city_div" id="box02">Div #02</div>

<a href="same.html" class="city-toggle">South</a>
<div class="city_div" id="box03">Div #03</div>

また、リンクが意味のある場所に移動しない場合は、#as を使用してhref、ボックスがデフォルトで表示されるようにしてください。(boxes.hide();最初に右を使用してそれらを非表示にします。)

また、<br>そこで使うべきものではありません。<div>s は既にブロック レベルの要素です。より多くのパディングが必要な場合は、上部の余白を与えます。

于 2012-10-09T14:37:53.233 に答える
0

アニメーションを使用しているため、現在表示されている div を追跡することをお勧めします。そうしないと、リンクを立て続けにクリックすると、複数の div が表示されるようになります。

これを使用できます：

$(function() {
    $("a").click(function(e) {
        e.preventDefault();
        var selectedDiv = $("#" + $(this).attr("href"));
        var hide = selectedDiv.data("shown");

        $(".city_div").slideUp(600);
        $(".city_div").data("shown", false);

        if (hide) {
            selectedDiv.data("shown", false);
        }
        else {
            selectedDiv.data("shown", true);
            selectedDiv.slideDown(200);
        }
    });
});​

これが実際の例です

于 2012-10-09T14:47:25.460 に答える
0

jQuery を使用しているので、jQuery.toggle関数を使用してみることができます。

function show_region(chosen_region) {
     $('#' + chosen_region).toggle('slide');
     return false;
}
于 2012-10-09T14:40:51.777 に答える
0

古い選択した地域名で変数を保持する必要があります

<script type="text/javascript">
    var old_chosen_region="";
    function show_region(chosen_region) {
        $('.city_div').each(function(index) {
            if (($(this).attr("id") == chosen_region)&&(chosen_region!=old_chosen_region)) {
                $(this).slideDown(200);
                old_chosen_region=chosen_region;
            } else {
                $(this).slideUp(600);
            }
        }
        old_chosen_region='';
    });
</script>

これにより、最後に選択したリージョンを「記憶」し、選択したリージョンが最後に選択したリージョンと同じ場合は、そのリージョンを閉じることができます。

old_chosen_region=''最後に、タブを再度開くように設定する必要が あります。

于 2012-10-09T14:37:52.390 に答える
0

これを試して：

$(document).ready(function(){
    $('.city_div').click(function(){
        $(this).hide(); //or whatever code you want to hide it
    });
});

そうすれば、divをクリックすると非表示になります。

于 2012-10-09T14:38:16.427 に答える
0

まず、なぜそんなに古いバージョンの jQuery を使用しているのですか?

次に、JavaScript を単純化できます。jQuery はセットで動作します。.each、またはループは必要ありません。

これが実際の例です: http://jsfiddle.net/gibble/25P9z/

簡略化された HTML:

<a href="#" data-contentDiv="box01">North</a><br>
<div class="city_div" id="box01">Div #01</div>

<a href="#" data-contentDiv="box02">Centre</a><br>
<div class="city_div" id="box02">Div #02</div>

<a href="#" data-contentDiv="box03">South</a><br>
<div class="city_div" id="box03">Div #03</div>​

新しい JavaScript:

function show_region(e) {
    var $target = $(e.target);
    var chosen_region = $target.attr('data-contentDiv');

    var openDiv = $('#' + chosen_region);

    openDiv.slideDown(200);
    $('.city_div').not(openDiv).slideUp(600);
}

最後に、イベントを添付します。HTML にインライン化しないでください。

$('a[data-contentDiv]').click(show_region);​
于 2012-10-09T14:41:55.523 に答える
0

最後にクリックした div を追跡します。

var globalLastClickedButtonId;
$("div.city_div").click(function() {
    if (globalLastClickedButtonId == $(this).attr("id")) {
        $(this).hide();
    } else {
        var box = $(this).next().next();
        var clickedId = $(this).attr("id");
        $("div.city_div").each(function() {
           if ($(this).attr("id") == clickedId)
              box.slideDown(200);
           else
              box.slideUp(600);
        }
    }
    globalLastClickedButtonId = $(this).attr("id");
});
于 2012-10-09T14:44:53.293 に答える