javascript - URLのいくつかのdivにjqueryのスライドアップコマンドを渡しますか?

Question

drupal Web サイトの一部の div に jquery スライド アップ/ダウンを使用しています。スライド アップ コマンドを URL の特定の div に渡すことができるかどうかを知りたいです。

例 domain.com/?q=node/13/#div1&slideup

助けてくれてどうもありがとう、David D.

Answer 1

ご協力いただきありがとうございます。

私はしばらく Cecchi の提案を実装しましたが、しばらくすると (メインの div に従って他の 2 つの div のクラスを変更するために) もう少し柔軟性が必要になり始めたので、いくつかの変更を加えました。

私は以下を使用しています：

$(document).ready(function(){
   var url = window.location.pathname.split('&');
   var id = url[1]
   $("#div" + id).slideDown("slow");
   $("#button_slide" + id).addClass('button_slide_active');
   $("#product_frame" + id).addClass('product_frame_active');
});

Answer 2

もちろん、location.hashプロパティを解析し、他の目的（つまり実際のアンカー）にハッシュを使用していないことを確認する必要があります。

$(document).ready(function() {
  if(location.hash.substr(-8) === '&slideup') {
    $(location.hash.substr(0, location.hash.indexOf('&'))).slideUp();
  }
});

Answer 3

にアクセスしwindow.location.hashて、URL の「div1&slideup」部分を取得できます。onLoad イベント ハンドラー内でこれを行うと、その後は好きなことを行うことができます。

これは、アイデアを提供するための（テストされていない）サンプルjQueryコードです（技術的にはonReadyであり、onLoadではありませんが、同じ違いです）：

$(function() {
    var hash = window.location.hash;
    var divId = hash.split('&')[0];
    $(divId).slideUp();
});

Answer 4

さて、このロジックを理解し始めたので、JavaScriptコードを少しきれいにしたいと思います...

多分あなたは私にいくつかの提案をすることができます.

私は div10 まで次のコードを使用しています。すべての div に対してコードのインスタンスを 1 つだけ使用したいと考えています。

$(document).ready(function(){
$("#button_slide1,#link_1,#link_1_1,#link_1_2").click(function(){
$("#div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10").slideUp("slow");
$("#button_slide2, #button_slide3, #button_slide4, #button_slide5, #button_slide6, #button_slide7, #button_slide8, #button_slide9, #button_slide10").removeClass('botao-active');
$("#product_frame2, #product_frame3, #product_frame4, #product_frame5, #product_frame6, #product_frame7, #product_frame8, #product_frame9, #product_frame10").removeClass("product_frameactive");

$("#div1").slideToggle("slow");
$("#button_slide1").toggleClass("botao-active");
$("#product_frame1").toggleClass("product_frameactive"); return false;
});
});

$(document).ready(function(){
$("#button_slide2,#link_2,#link_2_1").click(function(){
$("#div1, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10").slideUp("slow");
$("#button_slide1, #button_slide3, #button_slide4, #button_slide5, #button_slide6, #button_slide7, #button_slide8, #button_slide9, #button_slide10").removeClass('botao-active');
$("#product_frame1, #product_frame3, #product_frame4, #product_frame5, #product_frame6, #product_frame7, #product_frame8, #product_frame9, #product_frame10").removeClass("product_frameactive");

$("#div2").slideToggle("slow");
$("#button_slide2").toggleClass("botao-active");
$("#product_frame2").toggleClass("product_frameactive"); return false;
});
});

$(document).ready(function(){
$("#button_slide3,#link_3,#link_3_1").click(function(){
$("#div1, #div2, #div4, #div5, #div6, #div7, #div8, #div9, #div10").slideUp("slow");
$("#button_slide1, #button_slide2, #button_slide4, #button_slide5, #button_slide6, #button_slide7,  #button_slide8, #button_slide9, #button_slide10").removeClass('botao-active');
$("#product_frame1, #product_frame2, #product_frame4, #product_frame5, #product_frame6, #product_frame7,  #product_frame8, #product_frame9, #product_frame10").removeClass("product_frameactive");

$("#div3").slideToggle("slow");
$("#button_slide3").toggleClass("botao-active");
$("#product_frame3").toggleClass("product_frameactive"); return false;
});
});