Форум PHP программистов > Обработка события, даже если посетитель

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Обработка события, даже если посетитель

Dunix

19.10.2011 - 08:03

есть скрипт с выпадающим меню (как на facebook, google)


<head>
    <script type="text/javascript">
    function showElement(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
    } else { 
    myLayer.style.display="none";
    }
    }
    </script>
</head>
<style>
    .v-menu{border:solid 1px #7f9fbf; width:200px; clear:both;}
    ul.v-menu, v.menu li{padding:0; margin:0; list-style:none;}
    ul.v-menu{clear:both; margin-top:6px;padding:6px 10px;}
</style>
<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu" style="display:none;">
<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>
</ul>

все замечательно, за исключением того факта, что при клике в сторону меню продолжает висеть открытым, а мне нужна противоположная реакция - чтобы она пряталась обратно, даже если клиент не нажал "Click Here". Код хотел на jsfiddle запостить, но проблемы некоторого характера возникли

Спустя 2 часа, 49 минут, 9 секунд (19.10.2011 - 09:52) alexbel2404 написал(а):

напиши функцию для события onblur.

Спустя 4 часа, 3 минуты, 44 секунды (19.10.2011 - 13:56) Winston написал(а):

Написать вот так ссылку

<a href="#" class="button" id="button" onclick="javascript:showElement('v-menu')" onblur="javascript:showElement('v-menu')">

Но OnBlur сработает здесь, если будет нажата клавиша Tab

Спустя 19 часов, 58 минут, 7 секунд (20.10.2011 - 09:54) Dunix написал(а):

Tab как камень предкновения, для пользователей это критично в плане юзабилити

Спустя 6 часов, 3 минуты, 24 секунды (20.10.2011 - 15:57) Dunix написал(а):

не судите строго, первый раз берусь писать что-то на js, был вынужден заняться сам этой проблемой, тк не нашёл ничего кроме api jquery
быдлокод


<head>
    <link rel="stylesheet" type="text/css" media="all" href="style.css">
    <script type="text/javascript">
    
    function showElement(layer) {
    var myLayer = document.getElementById("v-menu");
    if ( myLayer.style.display=="none" )
    {
         myLayer.style.display="block";
         myLayer.backgroundPosition="top";
    } else { 
         myLayer.style.display="none";
    }
    }
    
    function hideElement(layer) {
    var myLayer = document.getElementById("v-menu");
    if ( myLayer.style.display=="block" )
    {
         myLayer.style.display="none";
    }
    }
    </script>
</head>
<div id="content" onclick="javascript:hideElement('menu')">

<a href="#" class="button" id="button" onclick="javascript:showElement('v-menu')">
    <span>Click Here</span>
</a>

    <div id="menu">
        <ul id="v-menu" class="v-menu" style="display:block;">
        <li><a href="/user/profile/">профиль</a></li>
        <li><a href="/user/viewfriends/">друзья</a></li>
        <li><a href="/user/saved/">избранное</a></li>
        <li><a href="/login.php?op=logout&return=">выйти</a></li>
        </ul>
    </div>
</div>

проблема в том, что эта хрень не работает как нужно. При нажатии в сторону (назначил на эту роль див CONTENT), див v-menu пропадает, как и задумывалось, но при этом кнопка "Click Here" перестает работать, она лишь выполняет ту же роль "скрывателя" v-menu. Когда я отрубаю функцию hideElement, "Click Here" начинает работать как положено. Где возник конфликт? Где я набыдлокодил?

Быстрый ответ:

Здесь расположена полная версия этой страницы.