Question

我正在使用jQuery创建一个滑动搜索栏。我正在使用

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

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

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

    ...

});

这在我的主页上完美运行，但是当我导航到其他页面时，我开始遇到问题（两个页面上的代码完全相同 - 我使用PHP在两个页面上都包含代码）。

在我的主页上，当我第一次将元素滑出时，jQuery会分配一个显示属性＆＃34; inline-block，＆＃34;这完全正确。但是，在主页以外的页面上，它会出现＆＃34; block＆＃34;对于显示属性。

为什么会这样？我该如何解决？

修改这是与上面的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>

Answer 1

您可以尝试使用css上的!important隐式声明样式

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

希望这会有所帮助。

jQuery Animate Width：＆＃39; Toggle＆＃39;出乎意料地行事

1 个答案: