在设备旋转时删除div内联样式

Question

我正在处理一个搜索表单，该表单在桌面上展开并在移动设备上展开。一切都没问题，除了我注意到的一个问题。

要查看此问题，请在https://jsfiddle.net/jrnvbvb5/

中复制这些步骤

在firefox中使用firebug打开，将窗口大小更改为1685px宽度（或关闭），如果旋转窗口，则只需使用搜索图标替换扩展搜索栏。无论您多少次更改设备方向，这都可以。

现在，将视图更改为纵向并单击搜索按钮（以在搜索表单下方展开）。再次单击以关闭下拉列表并隐藏搜索栏和NEXT，旋转到横向，扩展搜索将不再显示。

当我用萤火虫检查时，我看到哪个会阻止搜索表单出现。那么，我怎么能失去那种风格=“display：none;当我将视图改为肖像时？

$(".dropdown").click(function(event) {
  event.stopPropagation();
  $(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
  $(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
  $(".dropdown-values").fadeOut(500);
  $(".dropdown-title").removeClass("activated");
});
$(".dropdown-title").click(function(event) {
  $(this).siblings(".dropdown-values").fadeToggle(500);

  $(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});
$(".icon-search").click(function(event) {
  $(this).siblings(".search-form-container").fadeToggle(500);

  $(this).parents(".searchBar-form").find('.icon-search').toggleClass("activated");
});

.show_hide {
  display: none;
}
header {
  position: relative;
  top: 0px;
  z-index: 300;
  width: 100%;
  height: 48px;
  background-color: blue;
}
.logo {
  height: 100%;
  width: 200px;
  margin: 0;
  padding: 0;
  float: left;
  background-color: red;
}
.page-nav-right {
  display: inline-block;
  height: 100%;
  width: 200px;
  margin: 0;
  padding: 0;
  float: right;
  background-color: red;
}
.searchBar-form {
  margin: 0 auto;
  max-width: 40%;
  display: block;
}
}
.dropdown {
  background: #313654;
  display: inline-block;
  cursor: pointer;
  float: right;
}
.dropdown:hover {
  background: grey;
  color: white;
}
.dropdown:hover .dropdown-values {
  background: orange;
  color: white;
}
.activated {
  background: orange;
}
.dropdown-title {
  display: block;
  padding: 5px 10px 5px 10px;
  font-size: 13px;
  font-weight: bold;
  color: #FFF;
}
.dropdown-values {
  position: absolute;
  right: 0px;
  top: 100%;
  background: #3f4c6b;
  padding: 10px;
  display: none;
  width: 100%;
  box-sizing: border-box;
}
.dropdown-values a {
  display: block;
}
.dropdown-values a:HOVER {
  background: #dedede;
  display: block;
}
.search input[type=submit] {
  padding: 0;
  border: none;
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  height: 34px;
  line-height: 34px;
  width: 42px;
  cursor: pointer;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  outline: 0;
}
.search input[type=submit]:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
.search input {
  color: #fff;
  background-color: transparent;
  border: 2px solid #fff;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 18px;
  padding: 7px 87px 6px 10px;
  width: 100%;
}
.search {
  position: relative;
  margin: 0 auto;
  padding: 5px;
  box-sizing: border-box;
}
.search .icon {
  position: absolute;
  right: 2px;
  top: 2px;
  color: #fff;
}
.search .icon i {
  font-size: 21px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  width: 40px;
}
.search .separator {
  position: absolute;
  width: 1px;
  top: 10px;
  bottom: 8px;
  right: 43px;
  background-image: linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%);
  background-image: -o-linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(236, 236, 236) 0%, rgb(204, 204, 204) 50%, rgb(236, 236, 236) 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(236, 236, 236)), color-stop(0.5, rgb(204, 204, 204)), color-stop(1, rgb(236, 236, 236)));
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);
}
.search .search-options {
  z-index: 999;
}
.search-options-toggle {
  color: #fff;
  display: block;
  position: absolute;
  right: 45px;
  top: 2px;
}
.search-options-toggle i {
  background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
  cursor: pointer;
  font-size: 18px;
  height: 35px;
  line-height: 35px;
  width: 40px;
  text-align: center;
}
.search-icon {
  position: absolute;
  right: 0;
  top: 0;
}
.search-form-container {
  background: #3f4c6b none repeat scroll 0 0;
  box-sizing: border-box;
  display: none;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
}
@media only screen and (max-width: 699px) {
  .icon-search {
    cursor: pointer;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    position: relative;
    text-align: center;
    width: 36px;
  }
  .searchBar-form {
    display: inline-block;
    float: right;
    margin: 0 auto;
    max-width: 100%;
  }
  .search-form-container {
    box-sizing: border-box;
    margin: 0 auto;
    overflow: visible;
    padding: 5px;
    position: absolute;
    top: 100%;
    width: 100%;
    display: none;
  }
}
@media only screen and (min-width: 700px) {
  .search .icon-search {
    display: block;
  }
  .icon-search {
    display: none;
  }
  .searchBar-form {
    position: relative;
  }
  .search-form-container {
    background-color: transparent;
    display: block;
    padding: 0;
    position: absolute;
    top: 0;
  }
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header>
  <div class="logo" role="navigation"></div>
  <div class="page-nav-right" role="navigation"></div>
  <div class="searchBar-form">
    <i class="icon-search"></i>
    <div class="search-form-container">
      <form class="search" method="get" action="http://www.google.com">
        <input type="text" class="text-input" size="21" maxlength="120">
        <div class="dropdown search-options">
          <a class="dropdown-title search-options-toggle" href="#/">
            <i class="icon-cut"></i>
          </a>
          <ul class="dropdown-values search-options-container">
            <li>OPTION 1</li>
            <li>OPTION 2</li>
            <li>OPTION 3</li>
            <li>OPTION 4</li>
            <li>OPTION 5</li>
          </ul>
        </div>
        <div class="separator"></div>
        <div class="icon">
          <i class="icon-search"></i>
        </div>
        <input type="submit" value="">
      </form>
    </div>
  </div>
</header>

Answer 1

我找到了解决方案（以防其他人需要） 替换$（this）.siblings（“。search-form-container”）。fadeToggle（500）with toggleClass（“activated”）and in style add display：block！important to .activated