0

introducir la descripción de la imagen aquíMe encuentro con el siguiente problema, estoy creando un menu desplegable en HTML y hasta al momento casi todo funciona correctamente. El problema viene cuando quiero seleccionar el apartado "servicio industrial" dentro del despegable "servicios" para que me redireccione a otro documento html no lo hace, simplemente se cierra el despegable de "servicio".

Puse dentro del atributo href la dirección del documento a abrir y no lo hace, sin embargo, si esa misma dirección la pongo en los apartados como lo son "contacto o "inicio" que no son despegables si me redirecciona pero solo en los despegables que son "servicio industrial", "servicio automotriz" y "redes sociales" no lo hace

La parte interactiva la hago en jquery. Adjunto los codigos.

$(document).ready(function(){
    $('.menu li:has(ul)').click(function(e){
        e.preventDefault();

        if ($(this).hasClass('activado')){
            $(this).removeClass('activado');
            $(this).children('ul').slideUp();
        } else {
            $('.menu li ul').slideUp();
            $('.menu li').removeClass('activado');
            $(this).addClass('activado');
            $(this).children('ul').slideDown();
        }

    });

    $('.btn-menu').click(function(){
        $('.navbar .menu').slideToggle();
    });

    $(window).resize(function(){
        if ($(document).width() > 450) {
            $('.navbar .menu').css({'display' : 'block'});
        }

        if ($(document).width() < 450) {
            $('.navbar .menu').css({'display' : 'none'});
            $('.menu li ul').slideUp();
            $('.menu li').removeClass('activado');
        }
    });
});
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:  border-box;
    box-sizing: border-box;
}

body {
        background: #fff;
        font-family: 'Roboto', sans-serif;
        line-height: 18px;
}

a {
    text-align: none;
    text-decoration: none;
    color: #272727;
}

.btn-menu {
    display: none;
    padding: 20px;
    background: #0d2c44;
    color: #fff;
}

.btn-menu .icono {
    float: right;
}

.navbar {
    width: 20%;
    min-width: 300px;
    margin: 50px;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    line-height: 18px;
}

.navbar .menu {
    width: 100%;
}

.navbar ul {
    list-style: none;
}

.navbar .menu li a {
    color: #fff;
    display: block;
    padding: 15px 20px;
    background: #f20200;
}

.navbar .menu li a:hover {
    background: #fff;
    color: #f20200;
}

.navbar .menu .icono {
    font-size: 12px;
    line-height: 18px;
}

.navbar .menu .icono.izquierda {
    float: left;
    margin-right: 10px;
}

.navbar .menu .icono.derecha {
    float: right;
    margin-left: 10px;
}

.navbar .menu ul {
    display: none;
}

.navbar .menu ul li a {
    background: #000;
    color: #fff;
}

.navbar .menu .activado > a {
    background: #1a95d5;
    color: #fff;
}

@media screen and (max-width: 450px) {
    body {
        padding-top: 80px;
    }

    .navbar {
        margin: 0;
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 1000;
    }

    .btn-menu {
        display: block;
    }

    .navbar .menu {
        display: none;
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
    user-sacalable=no, initial-scale=1.0, minimum-scale=1.0">
    <title> Caure comercializadora</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="shortcut icon" href="favicon.png">
</head>
<body>

<div class="navbar">
    <a href="#" class="btn-menu">Menu<i class="icono fa fa-bars" aria-hidden="true"></i></a>

    <ul class="menu">
        <li><a href="#"><i class="icono izquierda fa fa-home" aria-hidden="true"></i>Inicio</a></li>
        <li><a href="#"><i class="icono izquierda fa fa-wrench" aria-hidden="true"></i>Servicios<i class="icono derecha fa fa-chevron-down" aria-hidden="true"></i></a>
            <ul>
                <li><a href="servicio_ind.html"><i class="icono izquierda fa fa-industry" aria-hidden="true"></i>Servicios Industriales</a></li>
                <li><a href="servicio_aut.html"><i class="icono izquierda fa fa-car" aria-hidden="true"></i> Servicios Automotrices</a></li>
            </ul>

        </li>
        <li><a href="#"><i class="icono izquierda fa fa-envelope" aria-hidden="true"></i>Contacto</a></li>
        <li><a href="#"><i class="icono izquierda fa fa-share-alt" aria-hidden="true"></i>Redes Sociales<i class="icono derecha fa fa-chevron-down" aria-hidden="true"></i></a>
            <ul>
                <li><a href="#"><i class="icono izquierda fa fa-facebook" aria-hidden="true"></i>Facebook</a></li>
            </ul>

        </li>
    </ul>
</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js">          </script>
      <script src="js/main.js"></script>
</body>
</html>

1 respuesta 1

0

intenta cambiar

$('.menu li:has(ul)').click(function(e)

por una clase especifica y no por el elemento. ej:

$('.desplegable').click(function(e)

HTML

<ul class="menu">
        <li class="desplegable">

Tienes un conflicto de etiquetas y debes separarlas de alguna manera. Atento a tu respuesta.

1
  • La solución fue: En el Jquery cambie el metodo de evento "e.PreventDefault();" por "e.stopPropagation();" de esa forma se pudo solucionar.
    – Jonathan
    Commented el 22 oct. 2021 a las 2:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.