развернуть строку ввода поиска при ошибке клика

Question

развернуть строку ввода поиска при ошибке клика

0

Ну, я пытаюсь сделать вход поиска расширяется при щелчке в моей кнопке class= "expand". У меня уже есть эта работа, но по крайней мере две ошибки. Во-первых, когда я нажимаю кнопку, чтобы развернуть вход, вход расширяется, но затем сразу же сжимается. Я не понимаю, почему это происходит. Вторая ошибка - везде, где я нажимаю на свою страницу, вход расширяется и сжимается сразу. Я думаю, что нужно использовать $('html').click(function() но я не вижу другого способа сделать это. Можете ли вы немного помочь?

Мой jQuery:

 <script type="text/javascript">        
        $(function() {
            $('button.expand').click(function() {
                $('#test').width(0).show().animate({width: 180}, 500);
            });
            $('html').click(function() {
            $('#test').width(180).show().animate({width: 0}, 500);
        });
        });  
    </script>

Мой Html:

<nav id="menu">
        <ul>

            <li><a href="Home.html">Home</a></li>
            <li><a href="About.html">About</a></li>


            <li>
                  <div id="search-container">
        <span id="search" >
             <form  name="form1" >
                <input id="test" type="search" placeholder="Search..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
                <button class="expand" type="submit"><i class="fa fa-search"></i></button>
             </form>
        </span> 
    </div>
            </li>
           </ul>
    </nav>

Мой css: CSS:

 .form-container input {display:none;}

John23 19 март 2014, в 23:24

Источник

Теги:

javascript

jquery

css

css3

2 ответа

0

Вы можете посмотреть в jQuery Animate docs и ответить на stackoverflow. Onclick Expand Textbox Width. Надеюсь, это поможет вам.

Fregt_ngul 19 март 2014, в 19:30

Ещё вопросы

Michał · Accepted Answer · 2014-03-19T19-48-00.000Z

Как контролировать состояние видимости #test?

$(function() {
    $('button.expand').click(function() {
        $('#test').width(0).show().animate({width: 180}, 500);
        $('#test').addClass("visible");
    });
    $('html').click(function() {
        if($('#test').hasClass("visible")){
            $('#test').width(180).show().animate({width: 0}, 500).removeClass("visible");
        }
    });
});

Спасибо. Этот код имеет смысл и кажется хорошим решением. Я никогда не использовал оператор if в jQuery раньше. Мне дают ошибку в строке if, я думал, что это может быть из скобок, но это не так. Я искал метод hasClass и его правильный текст. Где может быть ошибка?
Это была просто опечатка, исправили это.