Question

我在DIV中有一些按钮，需要它们通过onclick事件对外部DIV执行操作，以显示具有隐藏/显示功能的新DIV。

它在同一个div部分（.coluna）中工作正常，但是当我要执行操作以显示第一个DIV部分之外的DIV时（＃botao_continuar_1和＃passo_2之间的操作），它不起作用

它应该去：

botao_ok> passo_1_2> botao_continuar_1>（显示）passo_2> ...

botao_ok> passo_1_2> botao_voltar_1>（隐藏）passo_1_2

jsfiddle上的实时代码： https://jsfiddle.net/fozd9b2s/1/

代码：

<div class="coluna">
                <!-- Item 1 -->
                <div class="item" id="passo_1">

                    <h2>Text 1</h2>
                    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. </p>
                    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. </p>
                    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. </p>
                    <div class="botoes">
                        <div class="botao" id="botao_ok">Ok</div>
                    </div>
                </div>
                <div class="item2" id="passo_1_2">

                    <h2>Instrução 1.2</h2>
                    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. </p>
                    <div class="botoes" id="botao_continuar">
                        <div class="botao2" id="botao_voltar_1">Voltar</div>
                        <div class="botao2" id="botao_continuar_1">Continuar</div>
                    </div>
                </div>
            </div>
            <div class="coluna">
                <!-- Item 2 -->
                <div class="item" id="passo_2">                   
                    <h2>Instrução 2</h2>
                        <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. </p>

                        <div class="botoes">
                            <div class="botao" id="botao_voltar_2"> Não </div>
                            <div class="botao" id="botao_continuar_2"> Sim </div>
                        </div>
                </div>
                <div class="item2" id="passo_2_1">

                    <h2>Instrução 2.1</h2>
                    <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. </p>
                    <div class="botoes">
                        <div class="botao2" id="botao_voltar_3">Voltar</div>
                        <div class="botao2" id="botao_continuar_3">Continuar</div>
                    </div>
                </div>
            </div>

这是jquery：

  $(document).ready(function(){
//-----------
        $("#botao_ok").on("click",function () {
            $("#passo_1_2").show("slow");
        });
        //
        $("#botao_voltar_1").on("click",function(){
            $("#passo_1_2").hide("slow");
        });
        $("#botao_continuar_1").on("click",function(){
            $("#passo_2").show("slow");
        });
//-----------
});

Answer 1

您在CSS中得到了这个

.coluna:not(:first-child){
   display: none;
}

因此，除了第一个.coluna以外的所有$ cd "$(mktemp --directory)" $ mkdir a $ stat --format %i a/ 9 $ ln --symbolic a b $ stat --format %i b 10 $ stat --format %i b/ 9都是隐藏的。在他们自己显示之前，是否显示/隐藏他们的任何孩子都没有关系。

Answer 2

@keyframes infinite-spinning {
  0%{
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.image-to-spin {
  animation: infinite-spinning 1s infinite;
}

<meta charset="utf-8">
<title> Instruções de Reparo </title>
<link rel="stylesheet" href="page.css">

如何使用外部div元素的Onclick事件

2 个答案: