Дважды щелкните, чтобы показать div

Question

Я использовал javascript для отображения div по onclick, но когда я нажимаю на div, я хочу скрыть div.

после нескольких поисков, я нашел функцию, и она прекрасно работает

но есть проблема, код требует двойного щелчка на первый раз, чтобы показать нырял

моего код:

<script> 
// click on the div 
function toggle(e, id) { 
    var el = document.getElementById(id); 
    el.style.display = (el.style.display == 'none') ? 'block' : 'none'; 

    // save it for hiding 
    toggle.el = el; 

    // stop the event right here 
    if (e.stopPropagation) 
    e.stopPropagation(); 
    e.cancelBubble = true; 
    return false; 
} 

// click outside the div 
document.onclick = function() { 
    if (toggle.el) { 
    toggle.el.style.display = 'none'; 
    } 
} 

</script> 
<style>#tools{display:none;}</style> 

<div id="tools">Hidden div</div> 
<a href="#" onclick="toggle(event, 'tools');">show/hide</a> 

Это мой полный код, вы можете протестировать его на своем компьютере.

Вопрос заключается в следующем: функция требует двух щелчков мыши, я хочу показать DIV на мыши (один клик) Не (двойной щелчок)

Answer 1

Попробуйте это - http://jsfiddle.net/JjChY/1/

Изменить

el.style.display = (el.style.display == 'none') ? 'block' : 'none'; 

в

el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none'; 

Answer 2

Проблема заключается в том, что el.style.display читает только встроенные стили элемента, а не его CSS ,

Таким образом, при первом нажатии el.style.display есть '' (пустая строка), поэтому он установлен на «none». Затем второй раз el.style.display - 'none', поэтому он работает.

Вам нужно попробовать прочитать CSS-код элемента, если его встроенные стили пустые. Я собираюсь использовать метод getStyle из quirksmode для этого:

function getStyle(x, styleProp) { 
    if (x.currentStyle) { 
     var y = x.currentStyle[styleProp]; 
    } 
    else if (window.getComputedStyle) { 
     var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp); 
    } 
    return y; 
} 

// click on the div 

function toggle(e, id) { 
    var el = document.getElementById(id); 
    var display = el.style.display || getStyle(el, 'display'); 
    el.style.display = (display == 'none') ? 'block' : 'none'; 

    // save it for hiding 
    toggle.el = el; 

    // stop the event right here 
    if (e.stopPropagation) e.stopPropagation(); 
    e.cancelBubble = true; 
    return false; 
} 

// click outside the div 
document.onclick = function() { 
    if (toggle.el) { 
     toggle.el.style.display = 'none'; 
    } 
}​ 

DEMO: http://jsfiddle.net/JjChY/2/

Answer 3

Используйте это:

el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none'; 

Он должен работать.

Answer 4

Ваш код немного запутан. Это может быть написано гораздо проще:

<script> 
var toggle = function(id) { 
    var element = document.getElementById(id); 
    element.className = element.className === 'hidden' ? '' : 'hidden'; 

    return false; 
}; 
</script> 

<style> 
.hidden { 
    display: none; 
} 
</style> 

<div id="tools" class="hidden">Hidden div</div> 
<a href="#" onclick="toggle('tools');">show/hide</a> 

Answer 5

Если у вас есть JQuery, вы могли бы сделать что-то подобное для мыши снаружи.

Во-первых, установите класс в div «tools», когда мышь находится внутри него. Удалите класс, когда мышь не находится внутри него.

$('#tools').hover(function() { 
    $('#tools').addClass("inside"); 
}, 
function() { 
    $('#tools').removeClass("inside"); 
}); 

Затем отслеживание кликов по HTML. Скрыть, если класс «внутри» не находится в div «tools».

$("html").click(function() { 
    $("#tools").not(".inside").each(function() { 
     $("#tools").hide(); 
    }); 
});