javascript - Bootstrap dropdown Jquery Uncaught Error: Syntax error, unrecognized expression - Stack Overflow

admin管理员组

文章数量:1180551

I am trying to add an external http:// link on my bootstrap drop-down menu, but it always cause an

Uncaught Error: Syntax error, unrecognized expression: /

Here's the code I used with jQuery v1.11.3 and bootstrap v3.3.5

<nav class="main-navi">
    <div class="webinarlink"><a class="btn btn-danger btn-block" data-target="#" style="background-color:#EA4A2B;margin:auto;" href="/" target="_blank"><i class="icon-users"></i>Webinar</a></div>
    <ul>
        <li class="active"><a class="scroll-up" href="#home"><i class="fa fa-home"></i>&nbsp;Home</a></li>
        <li class=""><a class="scroll" href="#features">Features</a></li>
        <li class=""><a class="scroll" href="#testimonials">Testimonials</a></li>
        <li class=""><a class="scroll" href="#pricing">Prices</a></li>
        <li class="has-dropdown"><a class="scroll" href="#">Help<i class="fa fa-caret-down"></i></a>
            <ul class="dropdown">
                <li class=""><a class="scroll" href="#faq"><i class="fa fa-question-circle"></i>&nbsp;FAQ</a></li>
                <li class=""><a class="scroll" href="#team"><i class="fa fa-info-circle"></i>&nbsp;About Us</a></li>
                <li class=""><a class="scroll" href="#contus"><i class="fa fa-envelope"></i>&nbsp;Contact Us</a></li>
                <li class=""><a href="#pricing" class="scroll" onclick="Tawk_API.toggle();"><i class="fa fa-comments"></i>&nbsp;Chat with Us</a></li>
            </ul>
        </li>
    </ul>
</nav>

I tried adding data-target="#" but it didn't work.

I am trying to add an external http:// link on my bootstrap drop-down menu, but it always cause an

Uncaught Error: Syntax error, unrecognized expression: http://example.com/

Here's the code I used with jQuery v1.11.3 and bootstrap v3.3.5

<nav class="main-navi">
    <div class="webinarlink"><a class="btn btn-danger btn-block" data-target="#" style="background-color:#EA4A2B;margin:auto;" href="http://example.com/" target="_blank"><i class="icon-users"></i>Webinar</a></div>
    <ul>
        <li class="active"><a class="scroll-up" href="#home"><i class="fa fa-home"></i>&nbsp;Home</a></li>
        <li class=""><a class="scroll" href="#features">Features</a></li>
        <li class=""><a class="scroll" href="#testimonials">Testimonials</a></li>
        <li class=""><a class="scroll" href="#pricing">Prices</a></li>
        <li class="has-dropdown"><a class="scroll" href="#">Help<i class="fa fa-caret-down"></i></a>
            <ul class="dropdown">
                <li class=""><a class="scroll" href="#faq"><i class="fa fa-question-circle"></i>&nbsp;FAQ</a></li>
                <li class=""><a class="scroll" href="#team"><i class="fa fa-info-circle"></i>&nbsp;About Us</a></li>
                <li class=""><a class="scroll" href="#contus"><i class="fa fa-envelope"></i>&nbsp;Contact Us</a></li>
                <li class=""><a href="#pricing" class="scroll" onclick="Tawk_API.toggle();"><i class="fa fa-comments"></i>&nbsp;Chat with Us</a></li>
            </ul>
        </li>
    </ul>
</nav>

I tried adding data-target="#" but it didn't work.

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Feb 21, 2016 at 17:32 T.J. Crowder 1.1m199199 gold badges2k2k silver badges1.9k1.9k bronze badges asked Feb 21, 2016 at 17:26 Joseph RaphaelJoseph Raphael 34822 gold badges33 silver badges1313 bronze badges 5

• Please provide any help – Joseph Raphael Commented Feb 21, 2016 at 17:46
• 1 Please provide a fiddle that produce the problem, (you can update jsfiddle.net/DTcHh/17259) – Zakaria Acharki Commented Feb 21, 2016 at 17:48
• @ZakariaAcharki I have the website live, can I post the link here or it will be considered spam ? – Joseph Raphael Commented Feb 21, 2016 at 17:54
• Please post also the javascript related with your main-navi i guess the problem comme from it. – Zakaria Acharki Commented Feb 21, 2016 at 18:12
• @ZakariaAcharki here you go startearningwithme.com/js/landing2.js – Joseph Raphael Commented Feb 21, 2016 at 18:14

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 16

If you are stuck on old Bootstrap then you can patch getParent function of bootstrap-dropdown.js.

Just replace $parent = selector && $(selector) with this:

if (selector && selector !== '#') {
  $parent = $(selector)
}

The issue has been fixed by following these steps:

• Use latest version of jQuery v2.1.3 and bootstrap v3.3.6
• Load Bootstrap JS after jquery in order
• Using data-target="#" with href="#" and put the external link on an onClick() trigger.

Hope it helps.

In my case, I had a script that automatically switches the "active" class on menu items on scroll, all the 'href' of the 'a' html tags under the Boostrap menu must not equal to "#", this solution worked for my case, if anyone has a similar case.

Here is my solution to the getParent function in bootstrap

function getParent($this) {
        var selector = $this.attr('data-target')

        if (!selector) {
            selector = $this.attr('href')
            selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
        }

        //var $parent = selector && $(selector)
        var $parent = null;
        if (selector && selector !== '#') {
            $parent = $(selector)
        }

        return $parent && $parent.length ? $parent : $this.parent()
    }

Please check JQuery added in your page. Mostly this type of error comes due to 2 or more jquery versions

When using Bootstrap 2.0.4 and jQuery 3+, find the toggle function definition in dropdown.js or bootstrap.js and find the line that says:

$parent = $(selector);

On the line before, put:

selector = selector && selector !== "#" ? selector : null;

本文标签：