これをワードプレスのテーマに実装しました。フォルダー内のリンクをクリックしたときに、ハッシュ変更を実装する方法を理解しようとしています。このチュートリアルを使用して、ハッシュ変更をトリガーしようとしました。「Load permalink to .itemContent」をコメントアウトすると、ハッシュ変更が機能しますが、アイテムは即座に上下にスライドします。コメントアウトされていない場合、hashchange はトリガーされません。
また、誰かがhttp://www.pathtomydomain.com/#/item-name-1をアドレス バーにコピー (またはブックマーク) した場合、URL に従ってフォルダーを開く方法を教えてください。.trigger(click) と何か関係がありますか?
HTML
<div id="container">
<div class="item">
<a href="http://pathtomydomain.com/item-name-1">
<img src="an-image-1.jpg" />
</a>
</div>
<div class="item">
<a href="http://pathtomydomain.com/item-name-2">
<img src="an-image-2.jpg" />
</a>
</div>
<div class="item">
<a href="http://pathtomydomain.com/item-name-3">
<img src="an-image-3.jpg" />
</a>
</div>
</div>
<div class="itemContent"></div>
Jクエリ
$.ajaxSetup({cache:false});
$('.item').click(function(){
if($('.itemContent').is(":visible")){
$('.itemContent').slideUp("fast", function(){
});
} else if ($('.itemContent').is(":hidden")) {
$('.itemContent').empty();
$('.itemContent').html('<img class="loading" src="ajax-loader.gif"/>');
$('.itemContent').slideDown("fast", function(){
var $dock = $('#navigation'),
dockHeight = $dock.height();
$("html, body").animate({
scrollTop: $('.itemContent').offset().top - ( $(window).height() - dockHeight - $(this).outerHeight(true) ) / 2
});
});
/*
Load permalink to .itemContent .
*/
var post_link = $(this).children("a").attr("href");
$(".itemContent").load(post_link);
return false;
}
});
var $mainContent = $(".itemContent"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = this.pathname;
return false;
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
});
$(window).trigger('hashchange');