ここに何百万ものこれらがあることは知っていますが、何日もそれらをふるいにかけましたが、このコードを機能させることができません.
hoverIntent を既存の Wordpress テーマ Atahualpa に追加しようとしています。私はテーマが大好きですが、メニューが少し固執することを望みます. これは、複雑なページ構造を持つ GUI の使いやすさの問題です。
私はJavascriptにかなり慣れていないので、構文などが問題ないかどうかを判断するのが困難です。それが簡単であることを願っています。ここが私のいるところです。
Web サイトに .js をロードし、Firebug コンソールを使用してロードされていることを確認しました。
テーマで「メニュー アニメーション」を有効にしました。これには、元のコードである this を指すロジックがあります。
/* JQUERY */
jQuery(document).ready(function(){
<?php if ( $bfa_ata['animate_page_menu_bar'] == "Yes" AND strpos($bfa_ata['configure_header'],'%page')!== FALSE ) { ?>
jQuery("#rmenu2 li.rMenu-expand").hover(function(){
jQuery(this).find('ul.rMenu-ver:first').css({"display":"block","position":"absolute"});
jQuery(this).find('ul.rMenu-ver:first li').css({"display":"none"}).slideDown(500);
},function() {
jQuery(this).find('ul.rMenu-ver:first').css("display","block");
jQuery(this).find('ul.rMenu-ver:first li').css("display","block").slideUp(300);
jQuery(this).find('ul.rMenu-ver:first').slideUp(300);
});
多くの異なる例を見た後、コードを次のように変更しました。アニメーションの影響を維持したいと思います (ただし、PITA の場合は移動できます)。遅延を少し制御したいと思います。最も重要なのは、複雑なページ構造をナビゲートするのが難しいため、 hoverIntent が機能する必要があることです。
/* JQUERY */
$(document).ready(function(){
<?php if ( $bfa_ata['animate_page_menu_bar'] == "Yes" AND strpos($bfa_ata['configure_header'],'%page')!== FALSE ) { ?>
$("#rmenu2 li.rMenu-expand").hoverIntent({
over: function(){
jQuery(this).find('ul.rMenu-ver:first').css({"display":"block","position":"absolute"});
jQuery(this).find('ul.rMenu-ver:first li').css({"display":"none"}).slideDown(500);
$(this).children('a:first').addClass("hov");
},
timeout: 500,
out: function() {
jQuery(this).find('ul.rMenu-ver:first').css("display","block");
jQuery(this).find('ul.rMenu-ver:first li').css("display","block").slideUp(300);
jQuery(this).find('ul.rMenu-ver:first').slideUp(300);
$(this).children('a:first').removeClass("hov");
});
このコードは壊れています。メニューはデフォルトの CSS スタイルに戻るため、引き続き機能しますが、アニメーションはなくなり、マウスがメニューから離れたときの遅延は 0 になります。
助けてください！私は何を間違っていますか？