点击按钮时，将搜索框放在搜索按钮的左侧 - put searching box in the left side of search button when clicked button

put searching box in the left side of search button when clicked button

本文关键字：按钮搜索 | 更新日期: 2023-09-27

我有代码在单击按钮时展开搜索框，但我希望单击按钮左侧的搜索框

这是我的JavaScript：

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

我用 jsfiddle 写的，你可以在那里修改 n 请帮我https://jsfiddle.net/ehd5n0tx/1/

将表单放在第一个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>

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

在这里，查看您的列表项。我重新排列了它们：

<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/

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