1. Событие срабатывает сначала на самом вложенном элементе
.d2, а потом всплывает до указанного селектора
.d1
Читайте про
всплытие событий для понимания происходящего.
2. Если изменяемый css-параметр всего один, то вместо массива
.css({'display':'none'}) можно
.css('display', 'none')
3. И конечно вместо
.css({'display':'none'}) просто
.hide()