Как для или дезактивировать эффект slideToggle ()

Question

Как для или дезактивировать эффект slideToggle ()

Я хочу, чтобы, когда пользователь нажмет на кнопку издавания, эффект slideToggle () он задержался, кнопка издавать позволяет, что контент этикетки был editable, но проблема, - когда пользователь кликает или двойная порция click в этикетку editable, так как он так является эффектом slideToggle () и может беспокоить немного пользователя.

$(document).ready(function () {
    $('.titulo_hijo').on('click',function(){
        let titulo_hijo = $(this).next();
        titulo_hijo.slideToggle();
    });

    $('.eliminar').on('click', function(){
        let eliminar = $(this).parent().parent().parent();
        eliminar.remove();
    });

    $('.editar').on('click', function(){
        let editar = $(this).parent().prev();
        editar.attr("contentEditable","true");
        editar.focus();
    });

});

body{
    padding: 0;
    margin: 0;
}

*{
    box-sizing: border-box;
}

.contenedor_item{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-top: 10px;
}

.titulo_hijo{
    width: 95%;
    height: 50px;
}

.titulo_hijo{
    background: tomato;
    margin-bottom: 10px;
}

.hijo{
    margin-bottom: 10px;
    width: 95%;
    display: none;
}

.titulo_hijo, .nieto{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 15px;
    box-shadow: 0 2px 5px #757575;
}

.nieto{
    background: wheat;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
}

.iconos{
    display: flex;
    justify-content: center;
    align-items: center;
}

.eliminar{
    margin-left: 10px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pregunta</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="index5.js"></script>
    <link rel="stylesheet" href="index5.css">

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">

</head>
<body>
    <div class="contenedor">
        <div class="contenedor_item">
            <div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            <div class="hijo">
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            </div>
        </div>
        
        <div class="contenedor_item">
            <div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            <div class="hijo">
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            </div>
        </div>

        <div class="contenedor_item">
            <div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            <div class="hijo">
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            </div>
        </div>
    </div>
</body>
</html>

1

java

задан Gian Franco Alexis Poma Vidal 18.03.2019, 23:07

Ссылка

1 ответ

Похожие вопросы

alanfcm · Accepted Answer · 02.12.2019, 05:28

Ты можешь добиваться того, что ты хочешь с event.stopPropagation() так:

$(document).ready(function () {
    $('.titulo_hijo').on('click',function(){
        let titulo_hijo = $(this).next();
        titulo_hijo.slideToggle();
    });

    $('.eliminar').on('click', function(){
        let eliminar = $(this).parent().parent().parent();
        eliminar.remove();
    });

    $('.editar').on('click', function(e){
        e.stopPropagation();
        let editar = $(this).parent().prev();
        editar.attr("contentEditable","true");
        editar.focus();
    });

});

body{
    padding: 0;
    margin: 0;
}

*{
    box-sizing: border-box;
}

.contenedor_item{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-top: 10px;
}

.titulo_hijo{
    width: 95%;
    height: 50px;
}

.titulo_hijo{
    background: tomato;
    margin-bottom: 10px;
}

.hijo{
    margin-bottom: 10px;
    width: 95%;
    display: none;
}

.titulo_hijo, .nieto{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 15px;
    box-shadow: 0 2px 5px #757575;
}

.nieto{
    background: wheat;
    width: 100%;
    height: 50px;
    margin-bottom: 10px;
}

.iconos{
    display: flex;
    justify-content: center;
    align-items: center;
}

.eliminar{
    margin-left: 10px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pregunta</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="index5.js"></script>
    <link rel="stylesheet" href="index5.css">

    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">

</head>
<body>
    <div class="contenedor">
        <div class="contenedor_item">
            <div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            <div class="hijo">
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            </div>
        </div>
        
        <div class="contenedor_item">
            <div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            <div class="hijo">
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            </div>
        </div>

        <div class="contenedor_item">
            <div class="titulo_hijo"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            <div class="hijo">
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
                <div class="nieto"><p>Titulo editable</p><div class="iconos"><img src="https://img.icons8.com/material-sharp/20/000000/pencil.png" class="editar" alt="Editar" title="Editar"><img src="https://img.icons8.com/ios/20/000000/waste-filled.png" class="eliminar" alt="Eliminar" title="Eliminar"></div></div>
            </div>
        </div>
    </div>
</body>
</html>

Как для или дезактивировать эффект slideToggle ()

Теги

Похожие вопросы