you should add it after defining the var (before 'if'). clickover is definitely inside your method - 'var clickover ='

payment_form.js:459 DOM doesn't contain '.o_payment_form'

tour_manager.js:170 Tour Manager is ready. running_tour=null

collapse_menu.js:9 clickover: jQuery.fn.init [div.w-toggle-menu, context: div.w-toggle-menu]0: div.w-toggle-menucontext: div.w-toggle-menulength: 1__proto__: Object(0) _opened: false

collapse_menu.js:20 clickover: jQuery.fn.init [div.w-toggle-menu, context: div.w-toggle-menu]0: div.w-toggle-menucontext: div.w-toggle-menulength: 1__proto__: Object(0) _opened: false

collapse_menu.js:32 clickover: jQuery.fn.init [div.w-toggle-menu, context: div.w-toggle-menu]0: div.w-toggle-menucontext: div.w-toggle-menulength: 1__proto__: Object(0) _opened: false

Do i need to do something else as well? Because the menu dropdown is not closing when i click outside. And the _opened: is always false.

This is my .js file:

odoo.define('theme_wibas.collapseMenu', function (require) {

'use strict';

$(document).ready(function () {

$(document).click(function (event) {

var clickover = $(event.target);

var _opened = $(".navbar-top-collapse").hasClass("navbar-collapse navbar-top-collapse collapse in");

console.log("clickover: ", clickover, "_opened: ", _opened);

if (_opened === true && !clickover.hasClass("navbar-toggle collapsed")) {

$("button.navbar-toggle collapsed").click();

}

});

});

It means that selector $(".navbar-top-collapse") ie either not found or doesn't have a searched class. Besides, I guess what you do in 'if' is not correct, since the second part would be always true. It is better to use removeClass which will check for class by itself. I updated my initial answer - try to use it.

odoo.define('theme_wibas.collapseMenu', function (require) {

'use strict';

$(document).ready(function () {

$(document).click(function (event) {

event.stopPropagation();

var thisButton = $(document).find('.o_dropdown_toggler_btn');

console.log("thisButton", thisButton);

thisButton.removeClass(".navbar-toggle");

});

});

Doesn't work... :(

var thisButton = $(document).find('.navbar-collapse navbar-top-collapse collapse in');

$(document).ready(function () {

$(document).click(function (event) {

event.stopPropagation();

var thisButton = $(document).find('.navbar-collapse navbar-top-collapse collapse in');

console.log("thisButton", thisButton);

thisButton.removeClass(".navbar-toggle");

// thisButton.removeClass(".navbar-toggle collapsed");

});

});

Nope. Its still the same...

and what is logged by console.log("thisButton", thisButton)?

thisButton jQuery.fn.init [prevObject: jQuery.fn.init(1), context: document, selector: ".navbar-collapse navbar-top-collapse collapse in"]context: documentlength: 0prevObject: jQuery.fn.init [document, context: document]selector: ".navbar-collapse navbar-top-collapse collapse in"__proto__: Object(0)

So, length of found items is zero. It means that no elements with the class navbar-collapse navbar-top-collapse collapse in are on the document. Double check that you have an element with such a class

Ok will post all details:

1. When i click on the menu :

<button id="mainmenubutton" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-collapse">

<div class="w-toggle-menu">Menü</div>

<div class="w-toggle-close">×</div>

<div class="w-toggle-hamburger">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</div>

</button>

2. the the dropdown list code:

<div class="navbar-collapse navbar-top-collapse collapse in" aria-expanded="true" style="">

<ul class="nav navbar-nav navbar-left" id="top_menu">

<li>

<a href="/unternehmen">

<span data-oe-model="website.menu" data-oe-id="19" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">(f) Unternehmen</span>

</a>

</li>

<li>

<a href="/digitalisierung">

<span data-oe-model="website.menu" data-oe-id="15" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Digitalisierung</span>

</a>

</li>

<li>

<a href="/agile-organisation">

<span data-oe-model="website.menu" data-oe-id="7" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Agile Organisation</span>

</a>

</li>

<li>

<a href="/scaled-agile">

<span data-oe-model="website.menu" data-oe-id="24" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Scaled Agile</span>

</a>

</li>

<li>

<a href="/agile-methoden">

<span data-oe-model="website.menu" data-oe-id="22" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Agile Methoden</span>

</a>

</li>

<li>

<a href="/beratung">

<span data-oe-model="website.menu" data-oe-id="11" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Beratung</span>

</a>

</li>

<li>

<a href="/schulungen">

<span data-oe-model="website.menu" data-oe-id="9" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Schulungen</span>

</a>

</li>

<li>

<a href="/veranstaltungen">

<span data-oe-model="website.menu" data-oe-id="4" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Veranstaltungen</span>

</a>

</li>

<li>

<a href="/publikationen">

<span data-oe-model="website.menu" data-oe-id="5" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Publikationen</span>

</a>

</li>

<li>

<a href="/topicpage">

<span data-oe-model="website.menu" data-oe-id="38" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Topicpage</span>

</a>

</li>

<li>

<a href="/scaled-agile-1">

<span data-oe-model="website.menu" data-oe-id="37" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Scaled-Agile</span>

</a>

</li>

<li>

<a href="/lotse">

<span data-oe-model="website.menu" data-oe-id="39" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">Ihr Lotse</span>

</a>

</li>

<li>

<a href="/gulshan">

<span data-oe-model="website.menu" data-oe-id="40" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">gulshan</span>

</a>

</li>

<li>

<a href="/test">

<span data-oe-model="website.menu" data-oe-id="41" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">test</span>

</a>

</li>

<li>

<a href="/test-1">

<span data-oe-model="website.menu" data-oe-id="42" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">test</span>

</a>

</li>

<li>

<a href="/gulshan-1">

<span data-oe-model="website.menu" data-oe-id="44" data-oe-field="name" data-oe-type="char" data-oe-expression="submenu.name">gulshan</span>

</a>

</li>

<li class="divider"></li>

<li data-oe-model="ir.ui.view" data-oe-id="1327" data-oe-field="arch" data-oe-xpath="/data/xpath[4]/div[1]/div[2]/div[1]/ul[1]/li[2]">

<form class="navbar-form navbar-left" role="search">

<div class="inner-addon right-addon">

<i class="fa fa-search"></i>

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default hidden">Submit</button>

</form>

</li>

<li class="lang-select">

<a class="js_change_lang" href="/en_US/?debug=assets" data-lang="en_US">

switch to english

</a>

</li>

</ul>

</div>

Any help? I tried out every possible thing.

Hey Guys - The solution is this. This worked fine.

$(document).click(function (event) {

var clickover = $(event.target);

var $navbar = $(".navbar-top-collapse");

var _opened = $navbar.hasClass("in");

if (_opened === true && !clickover.hasClass("navbar-toggle collapsed")) {

$navbar.collapse('hide');

}

});