Question

我想用Vanilla JS制作手风琴，但我不知道怎么样，我被卡住了。

我的问题是我无法定位“手风琴文本”类，但在点击元素中使用“手风琴”类。

我尝试过使用querySelector，但这仅适用于第一个元素和我的切换仅适用于头等舱。

如果您点击手风琴2,3,4，您将只看到1.手风琴切换。

HTML：

<div class="accordion">
    <h1>ACCORDION 1</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

<div class="accordion">
    <h1>ACCORDION 2</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

<div class="accordion">
    <h1>ACCORDION 3</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

<div class="accordion">
    <h1>ACCORDION 4</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

<div class="accordion">
    <h1>ACCORDION 5</h1>
    <div class="accordion-text"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet</div>
</div>

CSS：

.accordion {
  position: relative;
  margin-bottom: 50px;
}
.accordion-text {
  display: none;
  position: absolute;
  left: -1px;
  top: 35px;
  z-index: 100;
}

 .active-accordion-text { 
    display: block;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    border: 0;
  }

JS：

var accordionElements = document.getElementsByClassName('accordion');

for (var i = 0; i < accordionElements.length; i++) {
    accordionElements.item(i).addEventListener('click', function () {
        document.querySelector('.accordion-text').classList.toggle('active-accordion-text');
   });

};

Answer 1

问题似乎出现在orig.filenames <- 1:10 filenames <- orig.filenames mysample <- function(x){ tmp <- sample(x,2) filenames <<- setdiff(filenames, tmp) if(length(filenames) < 3) filenames <<- orig.filenames tmp } ui <- fluidPage( fluidRow(uiOutput(outputId = "uiimg1"), uiOutput(outputId = "uiimg2")), fluidRow(uiOutput("radio")), fluidRow(uiOutput("nxt")), fluidRow(tags$div(HTML("<center>"), actionButton("start", "Start"), 'id' = "strtbtn"))) server <- function(input, output) { rv <- eventReactive(input$start |{req(input$nxt, isolate(input$choice))}, mysample(filenames)) observeEvent(input$start, {output$uiimg1<- renderUI(column(6, HTML("<center>Left Image"), fluidRow(imageOutput(outputId = "img1"))))}) observeEvent(input$start, {output$uiimg1<- renderUI(column(6, HTML("<center>Right Image"), fluidRow(imageOutput(outputId = "img2"))))}) observeEvent(input$start, {output$nxt <- renderUI(wellPanel(HTML("<center>"), actionButton("nxt","Next")))}) observeEvent(input$start, {output$radio<- renderUI( wellPanel(HTML("<center>"), radioButtons(inputId = "choice", label = "Which photo do you prefer?", c("Left", "Right"), inline = TRUE, selected = character (0) )))}) observeEvent(input$nxt, {output$radio<- renderUI( wellPanel(HTML("<center>"), radioButtons(inputId = "choice", label = "Which photo do you prefer?", c("Left", "Right"), inline = TRUE, selected = character (0) )))}) observeEvent(input$start, removeUI(selector = "div:has(> #strtbtn)", immediate = TRUE)) output$img1 <- renderImage({ filename1<- normalizePath(path= paste('/Users/Ben/Documents/Masters/Stats/Shiny/v8/www/', paste(rv()[1], '.jpg', sep = ''), sep ='')) list(src = filename1, width=325, height=214) }, deleteFile= FALSE) output$img2 <- renderImage({ filename2<- normalizePath(path= paste('/Users/Ben/Documents/Masters/Stats/Shiny/v8/www/', paste(rv()[2], '.jpg', sep = ''), sep ='')) list(src = filename1, width=325, height=214) }, deleteFile= FALSE) } shinyApp(ui = ui, server = server)。它总是从dom中选择第一个匹配的元素。用document.querySelector

放置它

this.querySelector

var accordionElements = document.getElementsByClassName('accordion');

for (var i = 0; i < accordionElements.length; i++) {
  accordionElements.item(i).addEventListener('click', function() {
    this.querySelector('.accordion-text').classList.toggle('active-accordion-text');
  });

};

.accordion {
  position: relative;
  margin-bottom: 50px;
}

.accordion-text {
  display: none;
  position: absolute;
  left: -1px;
  top: 35px;
  z-index: 100;
}

.active-accordion-text {
  display: block;
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  border: 0;
}

使用Pure Javascript在点击时定位父元素的子元素

1 个答案: