Question

我添加了一个覆盖它应该关闭的容器的跨度。它做得很好，但如果我点击这个结束跨度，它会打开li并关闭父跨度和ul，但保持li打开（尝试将li添加到.fadeout并不起作用）。附上我的小提琴并没有出现我的预期，所以我会在这里附上我的代码：

＆＃13;

     var main = function () {
    var recipeArray = ['drink', 'firstCourse', 'mainDish', 'dessert'];
    var recipeArrayLength = recipeArray.length;
    for (var i = 0; i < recipeArrayLength; i++) {

        var $checkBoxes = document.createElement('div');
        $checkBoxes.setAttribute("class", "checkBoxes");
        var $recipePicContainer = document.createElement('span');
        $recipePicContainer.setAttribute("class", "recipePicContainer");



        function makeRecipePic() {

            var recipe = document.createElement("IMG");
            recipe.setAttribute("src", "../images/grasshopper-cocktail.jpg");
            recipe.setAttribute("class", "recipe");
            $recipePicContainer.appendChild(recipe);
        }
        var $deleteRecipe = document.createElement('span');
        $deleteRecipe.setAttribute("class", "fa fa-times-circle", "aria-hidden", "true");
        $recipePicContainer.appendChild($deleteRecipe);

        $($deleteRecipe).click(function(){
            $(this).parents('span', 'ul').fadeOut();
        });

        makeRecipePic();

        var mainContainer = document.getElementsByClassName('mainContainer');
        mainContainer[0].appendChild($checkBoxes);

        var $div = document.createElement('div');
        $div.innerHTML = 'CockTails';
        $recipePicContainer.appendChild($div);
        $checkBoxes.appendChild($recipePicContainer);

        var $recipes = document.createElement("ul");
        var $checkboxes = document.getElementsByClassName('checkBoxes');

        var x = document.createElement("INPUT");
        x.setAttribute("type", "checkbox");

        for (var j = 1; j <= 6; j++) {
            var li = document.createElement("li");
            li.className = "ingredients";
            li.setAttribute("type", "checkbox");


            var a = document.createElement("a");
            a.innerHTML = "Ingredient " + j;

            li.appendChild(a);
            $recipes.appendChild(li);
        }
        var b = document.createElement("li");
        li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
        li.className = "Instructions";

        $checkboxes[i].appendChild($recipes);
    }
    $('.recipes').hide();
    $('<input type="checkbox" value="1" />').prependTo(".ingredients");
    $('.mainContainer .recipePicContainer').click(function () {
        $(this).next('ul').toggle("slow").toggleClass('selected');

    });

    };
    $(document).ready(main);

＆＃13;

    .fa-times-circle:before {
        content: "\f057";
        position: relative;
        left: 28px;
        bottom: 125px;
        color: white;
        -webkit-text-stroke: 1px black;
     }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    
    <div class="mainContainer col-md-12 col-xs-12">
    
    </div>

＆＃13;

Answer 1

好的，只需选择所有.siblings和.andSelf就可以解决这个问题。我确信还有其他方法可以做到这一点，但这很有效。

JS

var main = function () {
    var recipeArray = ['drink', 'firstCourse', 'mainDish', 'dessert'];
    var recipeArrayLength = recipeArray.length;
    for (var i = 0; i < recipeArrayLength; i++) {

        var $checkBoxes = document.createElement('div');
        $checkBoxes.setAttribute("class", "checkBoxes");
        var $recipePicContainer = document.createElement('span');
        $recipePicContainer.setAttribute("class", "recipePicContainer");



        function makeRecipePic() {

            var recipe = document.createElement("IMG");
            recipe.setAttribute("src", "../images/grasshopper-cocktail.jpg");
            recipe.setAttribute("class", "recipe");
            $recipePicContainer.appendChild(recipe);
        }
        var $deleteRecipe = document.createElement('span');
        $deleteRecipe.setAttribute("class", "fa fa-times-circle", "aria-hidden", "true");
        $checkBoxes.appendChild($deleteRecipe);


            $($deleteRecipe).click(function () {
                $(this).siblings().andSelf().fadeOut();
            });

        makeRecipePic();

        var mainContainer = document.getElementsByClassName('mainContainer');
        mainContainer[0].appendChild($checkBoxes);

        var $div = document.createElement('div');
        $div.innerHTML = 'CockTails';
        $recipePicContainer.appendChild($div);
        $checkBoxes.appendChild($recipePicContainer);

        var $recipes = document.createElement("ul");
        var $checkboxes = document.getElementsByClassName('checkBoxes');

        var x = document.createElement("INPUT");
        x.setAttribute("type", "checkbox");

        for (var j = 1; j <= 6; j++) {
            var li = document.createElement("li");
            li.className = "ingredients";
            li.setAttribute("type", "checkbox");


            var a = document.createElement("a");
            a.innerHTML = "Ingredient " + j;

            li.appendChild(a);
            $recipes.appendChild(li);
        }
        var b = document.createElement("li");
        li.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
        li.className = "Instructions";

        $checkboxes[i].appendChild($recipes);
    }
    $('.recipes').hide();
    $('<input type="checkbox" value="1" />').prependTo(".ingredients");
    $('.mainContainer .recipePicContainer').click(function () {
        $(this).next('ul').toggle("slow").toggleClass('selected');

    });

};
$(document).ready(main);

关闭在单击容器上共享另一个的单击div和ul，但保持不需要的li打开

1 个答案: