Форум

nat · #1 (**permalink**) 12.02.2014, 15:38

Здравствуйте. Прошу подсказки у знающих. Есть скрипт:

$(function() {
$(document).mouseup(function(e) {
if($(e.target).parent("a.signInBox").length == 0) {
$(".signInBox").removeClass("active");
$("#signInMenu").hide();
}
}),
$(".signInBox").click(
function(event) {
event.preventDefault();
$("#signInMenu").toggle();
$(this).toggleClass("active");
}

),
$("#signInMenu").mouseup(function() {
return false
})

});

Здесь по клику открывается форма входа на сайт. Мне нужно, что бы она открывалась при наведении. Меняла click на hover, работает, но сам элемент не активен. То есть при ховере сама форма появляется но зайти через эту форму я не могу, так как она сразу исчезает. Подскажите что еще добавить в код...

рони · #2 (**permalink**) 12.02.2014, 16:12

nat,
hover и элементы form

nat · #3 (**permalink**) 12.02.2014, 16:44

Спасибо, сделать элемент активным получилось, правда теперь блок не убирается когда отводишь курсор, пробовала mouseleave, но не выходит..

рони · #4 (**permalink**) 12.02.2014, 16:46

nat,
сделайте макет ... не все телепаты

nat · #5 (**permalink**) 12.02.2014, 16:56

$(function() {
$(document).mouseup(function(e) {
if($(e.target).parent("a.signInBox").length == 0) {
$(".signInBox").removeClass("active");
$("#signInMenu").hide();
}
}),
$(".signInBox").mouseenter(
function(event) {
event.preventDefault();
$("#signInMenu").toggle();
$(this).toggleClass("active");
}),
$("#signInMenu").mouseup(function() {
return false
})

});

рони · #6 (**permalink**) 12.02.2014, 16:59

nat,
макет это не только код но и html

nat · #7 (**permalink**) 12.02.2014, 17:01

<div class="relative">
	
    <div class="signInBox ml5"><div class="li-menu"><i class="icon-user"></i>Вход</div></div>
     
	 <div id="signInMenu" class="signInMenu">
  
     
	 <div class="inline mb10 pt10 pb10">
                                            
 </div>
   
<form accept-charset="UTF-8" id="user-login-form" method="post" action="/node?destination=node">
  
        <div class="z10">
           <label class="inputLabel" for="username_email">Логин или емайл:</label>
              <input type="text" name="name" id="edit-name">
              <label class="inputLabel" for="email">Пароль:</label>
                <input type="password" name="pass" id="edit-pass">
                <input type="hidden" value="" name="form_build_id">
                <input type="hidden" value="user_login_block" name="form_id">
              
				  
				<div class="sb-reg">    
                     <input type="submit" class="form-submit" value="Войти" name="op" id="edit-submit">
					 <a href="/user/password">Забыли пароль?</a>   
                </div>
             </div> 
 

	
</form>
             </div>
</div>
     
  
<script type="text/javascript">

$(function() {
$(document).mouseup(function(e) {
if($(e.target).parent("a.signInBox").length == 0) {
$(".signInBox").removeClass("active");
$("#signInMenu").hide();
}
}),
$(".signInBox").mouseenter(
function(event) {
event.preventDefault();
$("#signInMenu").toggle();
$(this).toggleClass("active");
}),
$("#signInMenu").mouseup(function() {
return false
})
})

});
</script>

рони · #8 (**permalink**) 12.02.2014, 17:07

nat,
то есть css прячем ? и в 56 строке что валяется?

рони · #9 (**permalink**) 12.02.2014, 17:17

nat,
и что не так работает?

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
        .signInMenu {
            display: none;
        }
        .li-menu {
            background-color: #FF00FF;
        }
    </style>
</head>

<body>
    <div class="relative">

        <div class="signInBox ml5">
            <div class="li-menu"><i class="icon-user"></i>Вход</div>
        </div>

        <div id="signInMenu" class="signInMenu">


            <div class="inline mb10 pt10 pb10">

            </div>

            <form accept-charset="UTF-8" id="user-login-form" method="post" action="/node?destination=node">

                <div class="z10">
                    <label class="inputLabel" for="username_email">Логин или емайл:</label>
                    <input type="text" name="name" id="edit-name">
                    <label class="inputLabel" for="email">Пароль:</label>
                    <input type="password" name="pass" id="edit-pass">
                    <input type="hidden" value="" name="form_build_id">
                    <input type="hidden" value="user_login_block" name="form_id">


                    <div class="sb-reg">
                        <input type="submit" class="form-submit" value="Войти" name="op" id="edit-submit">
                        <a href="/user/password">Забыли пароль?</a>
                    </div>
                </div>



            </form>
        </div>
    </div>


    <script type="text/javascript">
        $(function () {
            $(".signInBox").mouseenter(
                function (event) {
                    event.preventDefault();
                    $("#signInMenu").toggle();
                    $(this).toggleClass("active");
                });

            $("#signInMenu").mouseleave(function (event) {
                if ($(event.relatedTarget).parents(".relative").length == 0) $(this).toggle()

            });

        })
    </script>

</body>

</html>

nat · #10 (**permalink**) 12.02.2014, 17:40

да, css прячем. в 56строке убрала, то так скопировала.
Работает все, но вот навела на ВХОД, выпал блок, навела еще раз на Вход, он пропал. а вот если просто убираю курсор с блока, он не пропадает, только то клику может исчезнуть

Форум

Справочник

Discord чат

Курсы javascript