单击函数show（），在下次单击后消失

Question

So I'm experiencing problem - I got a function, when someone clicks a menu, it will show a div tag. See here -

$("a#cat").click(function() {
  $("div#categoryBox").show();
  return false;
});

So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are -

<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">

If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?

If you need any additional information, please ask.

Answer 1

May be the page is reloaded when you click on edit/delete links, so you think the div gets hidden. If you are doing any client side implementation on edit and delete click then you should make sure to prevent the default behavior or those links. Try this.

$('#categoryBox a').click(function(e){
    e.preventDefault();
});

Answer 2

There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.

If you want to display the div every time the url is ?action=edit or ?action=delete , use this:

$(function () {
    if (/\baction=(edit|delete)\b/.test(location.search)) {
        $("div#categoryBox").show();
    }
});

Or, you could append a hash parameter when you want to show the div:

<a href="?action=edit&id=<?php echo $id; ?>#showCategoryBox">edit</a>
<a href="?action=delete&id=<?php echo $id; ?>#showCategoryBox">delete</a>

$(function () {
    if (location.hash === "#showCategoryBox") {
        $("div#categoryBox").show();
    }
});