单击按钮

Question

我点击了按钮时展开搜索框的代码，但是我想要点击按钮左侧的搜索框

这里是我的javascript：

<script type="text/javascript">
$(document).ready(function() {
    $("#displayText").click(function() {
        $("#toggleText").toggleClass("focused");
    });
});
</script>

我在jsfiddle中写道，你可以修改一下n请帮帮我 https://jsfiddle.net/ehd5n0tx/1/

Answer 1

在您的代码中，您已将搜索框放在单击按钮之前的列表项中。这将强制搜索表单显示在按钮的左侧。

在这里，查看您的列表项。我已经重新安排了他们：

<li>
    <a id="displayText"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png" width="20"></a>
</li>
<li style="margin-right:-30px;">
    <div id="toggleText">
        <form style="
            display: inline;
            margin: 0;
            padding: 0;
        ">
            <input type="text" name="" placeholder="search" style="
                width: 200px;
                height: 30px;
                border-radius: 0;
            ">
        </form>
    </div>
</li>

https://jsfiddle.net/ehd5n0tx/2/

此外，您应该尝试远离内联样式并使用外部样式表。它易于维护和阅读。

Answer 2

将表单放在第一个div下，单击搜索图标时左侧会显示搜索栏。我没有触及内联样式，但我建议将这些样式移动到CSS文件中。

ul.filter {
display: inline;
list-style: none;
}
ul.filter li {
text-transform: uppercase;
margin-left: 40px;
display: inline;
}
#displayText{position:relative; top:-18px; cursor:pointer; float: right;}
#toggleText {
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
visibility: hidden;
opacity: 0;
}
#toggleText.focused {
visibility: visible;
opacity: 1;
display: inline;
}

HTML就是：

<div class="kanan-models-2" id="search-dekstop">
   <div id="toggleText">
      <form style="
         display: inline;
         margin: 0;
         padding: 0;
         ">
         <input type="text" name="" placeholder="search" style="
            width: 200px;
            height: 30px;
            border-radius: 0;
            ">
      </form>
   </div>
   <ul class="filter">
      <li><a href="#tab1">ALL</a></li>
      <li><a href="#tab2">FEMALE</a></li>
      <li><a href="#male">MALE</a></li>
      <li><img src="https://image.freepik.com/icones-gratuites/sortir-en-plein-ecran_318-9919.jpg" width="20"></li>
      <li style="margin-right:-30px;">
      </li>
      <li>
         <a id="displayText"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png" width="20"></a>
      </li>
   </ul>
</div>