2016-04-28 10 views
0

jQueryを使用してスライド検索バーを作成しています。私は、コードを含めるようにPHPを使用しています - 私はjQueryアニメーションの幅: 'Toggle'が予期せぬ動作をする

$(".search a").unbind('click').click(function(e){ 

    var searchParent = $(this).parent('.search'); 

    searchParent.children().children(".search-title").animate({ 
     width: 'toggle' 
    }); 

    ... 

}); 

これは私のホームページに完璧に動作しますが、私は他のページに移動したときに、私はコードが両方のページ上で正確に同じである(問題に実行して起動を使用しています両方のページで)。

私のホームページで、初めて要素をスライドさせると、jQueryは "inline-block"の表示プロパティを割り当てます。これは正確に正しく動作します。ただし、ホームページ以外のページでは、表示プロパティの「ブロック」を取得します。

なぜこれが起こっていますか?どのように私はそれを修正するのですか?

編集: 上記のjQueryに関連付けられたHTMLは次のとおりです。

<li class="search"> 
    <a href="#"> 
     <span class="fa fa-search"></span> 
     <span class="search-title">Search</span> 
    </a> 
    <input type="text" name="search" /> 
    <span class="fa fa-arrow-right"></span> 
</li> 
+0

HTMLの部分を共有してください – brk

+0

おそらく、CSSセレクタの特殊性の問題に取り組んでいる他のページで、その特定の要素にいくつかの異なるスタイルを割り当てているでしょう - または - 'searchParent.children()。children("。 'ちょうど間違っています。 –

+0

@ RokoC.Buljan私は単一の外部スタイルシートを使用しています。検索バーのコードは、後続の各ページに含まれる別々の単一のPHPファイルにあります。文字どおり何もページごとに変わりません。 – LakeJeffler

答えて

0

あなたは暗黙的にCSSこれは助け

.search{ 
 
    
 
    display: inline-block !important; 
 
    
 
    }

希望に!importantを使用してスタイルを宣言しようとすることができます。

関連する問題