метод для закрывания модуля при нажатии вне блока

250

14 февраля 2019, 02:40

Есть два модуля, у них есть общая функция clickaway, которая срабатывает по клику вне блока, при нажатии на кнопку .btn_menu модуль submenu закрывается, но вот при нажатии на .btn_submenu уже где-то затирается эвент.
Где-то нужно удалить / восстановить эвент? подскажите пожалуйтса)

var menu = (function() { 
  var opened = false, 
    $btn = $('.btn_menu'); 
  //events 
   $btn.click(toggle) 
   clickAway($btn, function() { 
     console.log('click away close menu') 
   }) 
 
  function toggle() { 
    if (!opened) { 
      console.log('menu opened') 
    } else { 
      console.log('menu closed') 
    } 
    opened = !opened 
  } 
})(); 
 
var submenu = (function() { 
  var opened = false, 
    $btn = $('.btn_submenu'); 
    //events 
    $btn.click(toggle); 
    clickAway($btn, function() { 
     console.log('click away close submenu') 
   }) 
   
  function toggle() { 
    if (!opened) { 
      console.log('submenu opened') 
    } else { 
      console.log('submenu closed') 
    } 
    opened = !opened 
    return false 
  } 
})(); 
 
function clickAway(selector, cb) { 
  $(document).click(function(e) { 
    if (!$(selector).is(e.target) && !$(e.target).closest(selector).length) { 
      cb() 
    } 
  }) 
}

.btn { 
  min-width: 200px; 
  height: 40px; 
  line-height: 40px; 
  font-size: 20px; 
  background-color: #ccc 
  border: 1px solid #000 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="btn btn_menu">menu</button> 
<button class="btn btn_submenu">submenu</button>

Answer 1

Код в функциях toggle несимметричный.

Возвращение false из обработчика click jQuery равнозначно вызовам e.preventDefault(); и e.stopPropagation();.

https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

  function toggle(e) {
    if (!opened) {
      console.log('submenu opened')
    } else {
      console.log('submenu closed')
    }
    opened = !opened
    //!!! return false
  }