Щелкните мышью div с вложенными divs внутри

Question

Я ищу сделать интерактивный div, в котором есть дополнительные divs внутри. Из того, что я понимаю, если вы создаете отображение тега привязки: block, он действует как блок (div), и вы можете вставить div, который вы хотите кликать в нем.

Тем не менее, я не верю, что вы можете продолжить вложение дополнительных divs за пределы этого ... если это так, то почему?

А также, что было бы лучшим/простым решением для решения этой проблемы. В идеале это был бы весь CSS/HTML, но решение jQuery было бы в порядке, если CSS/HTML действительно невозможен.

... В любом случае пример:

Это будет работать до тех пор, как якорь стилизовано дисплей (да?): Блок ...

введите код здесь

<a> 
    <div id='first'> 
    </div> 
</a> 

Это будет не ...

введите код здесь

<a> 
    <div id='first'> 
      <div id='inside first'> 
      </div> 
      <div id='inside first 2'> 
      </div> 
    </div> 
</a> 

Любая помощь оценивается. Благодаря!

Answer 1

Конечно ваш второй вариант будет работать - http://jsfiddle.net/W5jG8/ Вы можете пойти еще глубже. На самом деле нет предела тому, насколько глубоко вы можете заниматься гнездом. (Или, может быть, есть, но это не относится к реальным случаям)

Но семантически некорректно вставлять элементы уровня блока в исходные строки перед HTML5. Одним из решений является замена всех <div> -s на <span> -s, а также их блокирование.

Или вы можете использовать <div> -s с JQuery и прикрепить щелчок слушателя к обертке - http://jsfiddle.net/W5jG8/

Answer 2

Самый простой способ заключается в использовании JQuery, чтобы указать идентификатор для DIV вы хотите сделать clikable так:

$('#div_Id').click(function(){ 

blablabla... 

}); 

Вот Сомма документ: http://api.jquery.com/click/

Answer 3

если вы используете HTML5 Doctype она действует использовать анкерные теги для упаковки Div элементов, предположив, что вы не используете HTML5 Doctype то ты можно также попробовать это:

div#first { 
    cursor: pointer; 
} 

$('#first').click(function() { 
    window.location = 'http://www.example.com' 
}) 

Answer 4

Ввод Div теги внутри тега привязки не является допустимым HTML, так что вы не должны делать это. В вашем случае, проще всего было бы использовать немного JavasScript и определить простой OnClick событие на ваш родительский DIV, такие как:

<div id='first' onclick="javascript:MyRedirectFunction()"> 
     <div id='inside first'> 
     </div> 
     <div id='inside first 2'> 
     </div> 
</div> 

Затем, если вы хотите, чтобы пользователь, чтобы понять, что этот DIV будет кликабельна, вы может использовать CSS, чтобы придать ему якорный вид, такой как:

div#first{ cursor: pointer; } 
div#first:hover{ background-color:#CCCCCC;}