Databases
StackOverflow2013
Postsdbo
POHow to temporarily disable a navigation link using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to temporarily disable a navigation link using jQuery
    primarykey
    data
    text
    <p>I'm still learning a bit on javascript/jquery and running into a bump. Every post I pull seems to over-complicate the process, unless it really does require all the extra code.</p> <p>Here's what I'm doing:</p> <ul> <li>Creating a vertical navigation menu with sliding menu's and static sub-menu's</li> <li>Using HTML (5) layout with DL, DT and DD</li> <li>Nav menu is using minor CSS for styling</li> <li>Nav menu is using jQuery (1.8.3)</li> </ul> <p>I have everything working the way I want, but because I'm picky, I want to temporarily disable the link after a menu is expanded. If I try to click the menu that is already expanded, it slides up and then back down. What I wanted to do is make it so it just doesn't react to a click if it's already expanded.</p> <p>HTML of Nav Menu:</p> <pre><code>&lt;dl class="nav2"&gt; &lt;dt&gt;&lt;a href="#"&gt;Thing1&lt;/a&gt;&lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def2&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;dt&gt;&lt;a href="#"&gt;Thing2&lt;/a&gt;&lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def5&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def6&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;dt&gt;&lt;a href="#"&gt;Thing3&lt;/a&gt;&lt;/dt&gt; &lt;dd&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def7&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def8&lt;/a&gt;&lt;li&gt; &lt;li&gt;&lt;a href="#"&gt;Test Def9&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/dd&gt; &lt;/dl&gt; </code></pre> <p>jQuery for Nav Menu:</p> <pre><code>$(document).ready(function() { $("dd:not(:first)").hide(); $("dt a").click(function() { /* was thinking the added code would go here, but I could be wrong */ $("dd:visible").slideUp("fast"); $(this).parent().next().slideDown("fast"); return false; }); }); </code></pre> <p>I've tried a few things with bind and one, but due to my confusion with writing js/jquery, I'm not finding my trick. Is there anyway possible to say something like:</p> <pre><code>$(this:active).unbind("click"); </code></pre> <p>or</p> <pre><code>if ($(this).active(function() { $(this).unbind("click"); } else { $(this).bind("click"); )}; </code></pre> <p>I know I'm probably way off, but I'm trying. Is there any way to change this into javascript/jQuery?</p> <pre><code>When the DT A is clicked - make THIS DT / DT A not clickable; When THIS DT / DT A is no longer expanded or visible - make THIS DT / DT A clickable; </code></pre> <p>Thanks for the peak. Sorry if this was found somewhere. Each post I've ran into starts expanding this tiny change into several lines of code, whether attacking the CSS, longer then what seems to be needed javascript/jQuery or both. I just really want to try to keep it contained and simple (if at all possible).</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSiLeNCeD
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload