0

I have a menu and I can open and close the menu clicking on a tag. It works. Also I use OnBlur(). Actually it works too but When I click a div in the menu, OnBlur active, menu closes and div's onclick doesn't works. How can I fix this problem ?

In JavaScript Codes;

<script>
  function Acc_Show() {
    var q = document.getElementById("he-my");
    q.style.display = "";
    document.getElementById("my-account-btn").focus();
    document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Hide()");
  }
  function Acc_Hide() {
    var q = document.getElementById("he-my");
    q.style.display = "none";
    document.getElementById("my-account-btn").setAttribute("onclick", "Acc_Show()");
  }
</script>

In HTML codes;

<a id="my-account-btn" href="javascript:;" onclick="Acc_Show()" onblur="Acc_Hide()">My Account</a>

My Menu's Image;

https://i.stack.imgur.com/OMg6n.png

UPDATES Additional Codes From OP:

<div class="he-myac" id="he-my" style="display:none;">
  <div id="my-account-wrapper">
    <div class="myaccount" onclick="GoAdress('test.aspx')">Test</div>  
    <br/>
    <div class="myaccount" onclick="GoAdress('settings.aspx')" >Settings</div>
    <br/>
    <div class="myaccount" onclick="GoAdress('log_out.aspx')">Log Out</div>
  </div>
ivan.sim
  • 8,972
  • 8
  • 47
  • 63
Burak Kaya
  • 1
  • 2
  • You don't need to set an onclick attribute with JavaScript, you can simply add a click event handler that invokes your function. Check this out http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick – The Muffin Man Nov 18 '14 at 00:27
  • thank you but my main problem is not this. about OnBlur – Burak Kaya Nov 18 '14 at 00:44
  • So you mean after your function `Acc_Hide()` is called (triggered by an `onblur` event), the next click on your `my-account-btn` button doesn't trigger your `Acc_Show` function? – ivan.sim Nov 18 '14 at 00:57
  • @BurakKaya That's why I made a comment, not an answer. I'm trying to help you write clean code that's easy to understand. What you currently have is honestly a mess. Javascript function names should be lower camel case: `showAccount` vs `Acc_Show`. You re-query the same element multiple times... waste of typing, performance and readability. – The Muffin Man Nov 18 '14 at 01:48
  • No. Think like this. I clicked my-account-btn and menu opened. then I clicked a div (Div has onclick event) in the menu (inside). But div's onclick event doesn't work because when I click the div, onblur trigger and menu closes. I wanna that when I click the div, works the div's onclick event. – Burak Kaya Nov 18 '14 at 01:52
  • @TheMuffinMan I have already know these. But I don't want to use like that. I can understand my command and when there is problem, I usually fix them. Thank you for helping. – Burak Kaya Nov 18 '14 at 02:01

1 Answers1

0

I have a feeling this line q.style.display = ""; in your Acc_Show() function is causing the issue. Try replace it with q.style.display = "block";.

When an onblur event is triggered, your Acc_Hide() function hides your <div> by calling q.style.display = "none";. Then the next click on my-account-btn triggers your Acc_Show() function, which set your q.style.display to an empty string. That doesn't unhide your <div> block.

ivan.sim
  • 8,972
  • 8
  • 47
  • 63