<div>
You have this<br />

<pre><code class="code-1 nolinks" id="code-20-42070751-1"><span>var is_dt_mnuWeb_open = {status: false};</span>
</code></pre>
On click you have this<br />

<pre><code class="code-10 nolinks" id="code-20-42070751-2"><span>$('#liWebDesignDT').on('click', function() {</span>
<span>  if (is_dt_mnuWeb_open.status == true){</span>
<span>    $('#divSubWeb').css('display', 'inline-block');</span>
<span>    is_dt_mnuWeb_open.status = false;</span>
<span>  } </span>
<span>  else {</span>
<span>    $('#divSubWeb').css('display', 'none');</span>
<span>    is_dt_mnuWeb_open.status = true;</span>
<span>  }</span>
<span>});</span>
</code></pre>
status starts out false - so which branch is going to execute first?<br />
The second one - which is a 'hide' operation.<br />
<br />
You need to set your status: true in the initialisation<br />
<br />
To make your dropdowns dissappear on click<br />
<br />

<pre><code class="code-1 nolinks" id="code-20-42070751-3"><span>$(document).click(function() {</span>
<span>   // hide here</span>
<span>});</span>
</code></pre>
<br />
However you will need to add an event.stopPropagation() to your click handler above to prevent the event bubbling up and being cancelled by the document.click.
</div>


<div>
Thanks for spotting my logic error.<br />
<br />
Regarding events bubbling up, I assume you mean that $(document).click(function<wbr />() does not also trigger $('#liWebDesignDT').on('cl<wbr />ick', function() {, and others alike? If so, how do I prevent this, and what is event.stopPropagation()?
</div>


<div>
The problem begins from that line:<br />

<pre><code class="code-1 nolinks" id="code-20-42071114-1"><span>var is_dt_mnuWeb_open = {status: false};</span>
</code></pre>
<br />
If i set status to true then it works with only one click.:<br />

<pre><code class="code-1 nolinks" id="code-20-42071114-2"><span>var is_dt_mnuWeb_open = {status:true}; </span>
</code></pre>
</div>


<div>
@Leonidas, your post above was already covered in this post <a href="https://www.experts-exchange.com/questions/29012682/jQuery-on-click-requires-double-click.html?anchorAnswerId=42070751#a42070751" rel="ugc">https://www.experts-exchange.com/questions/29012682/jQuery-on-click-requires-double-click.html?anchorAnswerId=42070751#a42070751</a>
</div>


<div>
<div class="content wysiwyg-content">
Hi Experts,<br />
<br />
When you first load (or reload) <a href="http://aces-project.com/2017/_NEW.php" rel="ugc">http://aces-project.com/2017/_NEW.php</a>&nbsp;and click Website Design or Our Projects you need to click twice for the dropdown to appear. Can anyone tell me why?<br />
<br />
As well, how can I have the dropdowns to disappear when you click elsewhere? What event do I use?<br />
<br />
Thank you
</div>
</div>


Hi Experts,

When you first load (or reload) http://aces-project.com/2017/_NEW.php and click Website Design or Our Projects you need to click twice for the dropdown to appear. Can anyone tell me why?

As well, how can I have the dropdowns to disappear when you click elsewhere? What event do I use?

Thank you

jQuery on click requires double click

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

jQuery

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.